@oslokommune/punkt-elements 19.20.0 → 20.0.3

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

@@ -141,7 +141,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> implements IPktIn
           ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
           : nothing}
         ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-pale'}
               >${this.optionalText ?? formStrings.optional}</span
             >`
           : nothing}

package/src/components/link/link.test.ts

@@ -16,7 +16,7 @@ export interface LinkTestConfig extends BaseTestConfig {
   iconName?: string
   iconPosition?: string
   openInNewTab?: boolean
-  external?: boolean
+  rel?: string
 }
 
 // Use shared framework
@@ -63,7 +63,7 @@ describe('PktLink', () => {
       await link.updateComplete
 
       expect(link.href).toBe('#')
-      expect(link.external).toBe(false)
+      expect(link.rel).toBeNull()
       expect(link.iconName).toBeUndefined()
       expect(link.target).toBe('_self')
     })
@@ -79,14 +79,14 @@ describe('PktLink', () => {
       expect(anchor?.href).toBe('https://example.com/')
     })
 
-    test('sets external property correctly', async () => {
+    test('sets rel property correctly', async () => {
       const { link } = await createLinkTest({
         href: 'https://example.com',
-        external: true,
+        rel: 'noopener noreferrer',
       })
       await link.updateComplete
 
-      expect(link.external).toBe(true)
+      expect(link.rel).toBe('noopener noreferrer')
     })
   })
 
@@ -116,16 +116,15 @@ describe('PktLink', () => {
     })
   })
 
-  describe('External link functionality', () => {
-    test('applies external class and rel attribute', async () => {
+  describe('Rel attribute', () => {
+    test('passes rel to the anchor', async () => {
       const { link } = await createLinkTest({
         href: 'https://example.com',
-        external: true,
+        rel: 'noopener noreferrer',
       })
       await link.updateComplete
 
       const anchor = link.querySelector('a')
-      expect(anchor?.classList.contains('pkt-link--external')).toBe(true)
       expect(anchor?.rel).toBe('noopener noreferrer')
     })
 
@@ -171,19 +170,16 @@ describe('PktLink', () => {
       expect(anchor?.href).toBe('https://updated.com/')
     })
 
-    test('updates external property dynamically', async () => {
+    test('updates rel property dynamically', async () => {
       const { link } = await createLinkTest({
         href: 'https://example.com',
       })
       await link.updateComplete
 
-      link.external = true
+      link.rel = 'noopener noreferrer'
       await link.updateComplete
 
-      expect(link.external).toBe(true)
-      const anchor = link.querySelector('a')
-      expect(anchor?.classList.contains('pkt-link--external')).toBe(true)
-      expect(anchor?.rel).toBe('noopener noreferrer')
+      expect(link.querySelector('a')?.rel).toBe('noopener noreferrer')
     })
   })
 
@@ -206,7 +202,7 @@ describe('PktLink', () => {
         href: 'https://external-site.com',
         iconName: 'external',
         iconPosition: 'right',
-        external: true,
+        rel: 'noopener noreferrer',
         target: '_blank',
         content: 'Complex External Link',
       })
@@ -214,11 +210,11 @@ describe('PktLink', () => {
 
       expect(link.href).toBe('https://external-site.com')
       expect(link.iconName).toBe('external')
-      expect(link.external).toBe(true)
+      expect(link.rel).toBe('noopener noreferrer')
       expect(link.target).toBe('_blank')
 
       const anchor = link.querySelector('a')
-      expect(anchor?.classList.contains('pkt-link--external')).toBe(true)
+      expect(anchor?.rel).toBe('noopener noreferrer')
       expect(anchor?.classList.contains('pkt-link--icon-right')).toBe(true)
     })
   })

package/src/components/link/link.ts

@@ -17,7 +17,7 @@ export class PktLink extends PktElementWithSlot {
   @property({ type: String, reflect: true }) href: string = specDefaults.href.default as string
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
-  @property({ type: Boolean, reflect: true }) external: boolean = false
+  @property({ type: String, reflect: true }) rel: string | null = null
   @property({ type: String, reflect: true }) target: string | null =
     specDefaults.target.default as string
 
@@ -28,7 +28,6 @@ export class PktLink extends PktElementWithSlot {
         (!!this.iconName && this.iconPosition === 'left') ||
         !!(this.iconName && !this.iconPosition),
       'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
-      'pkt-link--external': this.external,
     }
     const target = this.target && this.target !== '_self' ? this.target : nothing
 
@@ -36,7 +35,7 @@ export class PktLink extends PktElementWithSlot {
       class=${classMap(classes)}
       href=${this.href}
       target=${target}
-      .rel=${this.external ? 'noopener noreferrer' : nothing}
+      rel=${this.rel || nothing}
       >${this.iconName
         ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
         : ''}${slotContent(this)}</a

package/src/components/linkcard/linkcard.test.ts

@@ -28,13 +28,14 @@ expect.extend(toHaveNoViolations)
 
 // Test data constants
 const VALID_SKINS: TLinkCardSkin[] = [
-  'normal',
-  'no-padding',
+  'gray',
+  'outlined',
+  'transparent',
+  'white',
   'blue',
-  'beige',
   'green',
-  'gray',
-  'beige-outline',
+  'beige',
+  'normal',
   'gray-outline',
 ]
 
@@ -65,7 +66,6 @@ describe('PktLinkCard', () => {
       expect(linkCard.iconName).toBe('')
       expect(linkCard.openInNewTab).toBe(false)
       expect(linkCard.skin).toBeUndefined()
-      expect(linkCard.external).toBe(false)
 
       expect(link.getAttribute('href')).toBe('#')
       expect(link.getAttribute('target')).toBe('_self')
@@ -221,6 +221,18 @@ describe('PktLinkCard', () => {
       }
     })
 
+    test('keeps light-only skins in light mode', async () => {
+      for (const skin of ['white', 'blue', 'green', 'beige'] as const) {
+        const { link } = await createLinkCardTest({ skin })
+        expect(link).toHaveAttribute('data-mode', 'light')
+      }
+
+      for (const skin of ['gray', 'outlined', 'transparent', 'normal', 'gray-outline'] as const) {
+        const { link } = await createLinkCardTest({ skin })
+        expect(link).not.toHaveAttribute('data-mode')
+      }
+    })
+
     test('handles skin property changes', async () => {
       const { linkCard, link } = await createLinkCardTest({ skin: 'blue' })
 

package/src/components/linkcard/linkcard.ts

@@ -4,7 +4,7 @@ import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
 import '@/components/icon'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import type { IPktLinkCardBase, TLinkCardSkin } from 'shared-types'
+import { LINKCARD_LIGHT_ONLY_SKINS, type IPktLinkCardBase, type TLinkCardSkin } from 'shared-types'
 
 export type { TLinkCardSkin }
 
@@ -14,7 +14,6 @@ export class PktLinkCard extends PktElementWithSlot<IPktLinkCard> implements IPk
   @property({ type: String, reflect: true }) title: string = ''
   @property({ type: String, reflect: true }) href: string = '#'
   @property({ type: String, reflect: true }) iconName: string = ''
-  @property({ type: Boolean, reflect: true }) external: boolean = false
   @property({ type: Boolean, reflect: true }) openInNewTab: boolean = false
   @property({ type: String, reflect: true }) skin?: TLinkCardSkin = undefined
 
@@ -23,10 +22,6 @@ export class PktLinkCard extends PktElementWithSlot<IPktLinkCard> implements IPk
       .filter(Boolean)
       .join(' ')
 
-    const titleClasses = ['pkt-linkcard__title', this.external && 'pkt-link pkt-link--external']
-      .filter(Boolean)
-      .join(' ')
-
     const s = this.pktStrings.get('linkcard')
     const newTabLabel = this.openInNewTab ? s.openInNewTab : ''
 
@@ -34,11 +29,14 @@ export class PktLinkCard extends PktElementWithSlot<IPktLinkCard> implements IPk
       <a
         href=${this.href}
         class=${classes}
+        data-mode=${ifDefined(
+          this.skin && LINKCARD_LIGHT_ONLY_SKINS.includes(this.skin) ? 'light' : undefined,
+        )}
         target=${this.openInNewTab ? '_blank' : '_self'}
         rel=${ifDefined(this.openInNewTab ? 'noopener noreferrer' : undefined)}
       >
         ${this.iconName && html`<pkt-icon class="pkt-link__icon" name="${this.iconName}"></pkt-icon>`}
-        ${this.title && html`<div class=${titleClasses}>${this.title}</div>`}
+        ${this.title && html`<div class="pkt-linkcard__title">${this.title}</div>`}
         ${newTabLabel ? html`<span class="pkt-sr-only">${newTabLabel}</span>` : ''}
 
         <div class="pkt-linkcard__text">${slotContent(this)}</div>

package/src/components/messagebox/messagebox.test.ts

@@ -72,7 +72,11 @@ describe('PktMessagebox', () => {
       expect(messagebox.closable).toBe(false)
       expect(messagebox.compact).toBe(false)
       expect(messagebox.title).toBe('')
-      expect(messagebox.skin).toBe('beige')
+      expect(messagebox.skin).toBe('gray')
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--gray')).toBe(true)
+      expect(messageboxDiv?.hasAttribute('data-mode')).toBe(false)
     })
 
     test('sets properties correctly', async () => {
@@ -91,6 +95,15 @@ describe('PktMessagebox', () => {
   })
 
   describe('Skin variants', () => {
+    test('keeps light-only skins in light mode', async () => {
+      for (const skin of ['beige', 'blue', 'red', 'green'] as const) {
+        const { messagebox } = await createMessageboxTest({ skin })
+
+        const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+        expect(messageboxDiv?.getAttribute('data-mode')).toBe('light')
+      }
+    })
+
     test('applies beige skin correctly', async () => {
       const { messagebox } = await createMessageboxTest({ skin: 'beige' })
 

package/src/components/messagebox/messagebox.ts

@@ -2,11 +2,17 @@ import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
 import { html, nothing, PropertyValues } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import '@/components/icon'
 import { updateClassAttribute } from '@/utils/classutils'
-import { MESSAGEBOX_DEFAULTS, type IPktMessageboxBase, type TMessageboxSkin } from 'shared-types'
+import {
+  MESSAGEBOX_DEFAULTS,
+  MESSAGEBOX_LIGHT_ONLY_SKINS,
+  type IPktMessageboxBase,
+  type TMessageboxSkin,
+} from 'shared-types'
 
 export type { TMessageboxSkin }
 
@@ -48,7 +54,12 @@ export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox
       'pkt-hide': this._isClosed,
     }
 
-    return html`<div class=${classMap(classes)}>
+    return html`<div
+      class=${classMap(classes)}
+      data-mode=${ifDefined(
+        this.skin && MESSAGEBOX_LIGHT_ONLY_SKINS.includes(this.skin) ? 'light' : undefined,
+      )}
+    >
       ${this.closable
         ? html`<div class="pkt-messagebox__close">
             <button

package/src/components/radiobutton/radiobutton.test.ts

@@ -187,7 +187,7 @@ describe('pkt-radiobutton', () => {
       optionalTag: true,
     })
 
-    const tag = radiobutton.querySelector('.pkt-tag--blue-light')
+    const tag = radiobutton.querySelector('.pkt-tag--blue-pale')
     expect(tag).toBeInTheDocument()
     expect(tag?.textContent).toBe('Valgfritt')
   })

package/src/components/radiobutton/radiobutton.ts

@@ -97,7 +97,7 @@ export class PktRadioButton extends PktInputElement<Props> implements IPktRadioB
         }
         ${
           this.optionalTag
-            ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}
+            ? html`<span class=${tagClasses + ' pkt-tag--blue-pale'}
                 >${this.optionalText ?? formStrings.optional}</span
               >`
             : nothing

package/src/components/tabs/tabitem.ts

@@ -6,9 +6,10 @@ import { consume } from '@lit/context'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { tabsContext, type TabsContext } from './tabs-context'
+import type { TTagSkin } from 'shared-types'
 import '@/components/tag'
 
-export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
+export type TSkin = TTagSkin
 
 export interface IPktTabItem {
   active?: boolean
@@ -85,7 +86,10 @@ export class PktTabItem extends PktElementWithSlot<IPktTabItem> implements IPktT
   render() {
     const useArrowNav = this.context?.useArrowNav ?? true
     const isActive = this.active && !this.disabled
-    const commonClasses = [isActive ? 'active' : '', this.disabled ? 'pkt-tabs__item--disabled' : '']
+    const commonClasses = [
+      isActive ? 'active' : '',
+      this.disabled ? 'pkt-tabs__item--disabled' : '',
+    ]
       .filter(Boolean)
       .join(' ')
     const role = useArrowNav ? 'tab' : undefined

package/src/components/tag/tag.test.ts

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
 import { vi } from 'vitest'
+import { TAG_SKINS, TAG_STATES } from 'shared-types'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktTag } from './tag'
@@ -25,17 +26,8 @@ export const createTagTest = async (config: TagTestConfig = {}) => {
 expect.extend(toHaveNoViolations)
 
 // Test data constants
-const VALID_SKINS = [
-  'blue',
-  'blue-dark',
-  'blue-light',
-  'green',
-  'red',
-  'yellow',
-  'beige',
-  'gray',
-  'grey',
-] as const
+const VALID_SKINS = TAG_SKINS
+const VALID_STATES = TAG_STATES
 const VALID_SIZES = ['small', 'medium', 'large'] as const
 const VALID_TYPES = ['button', 'reset', 'submit'] as const
 
@@ -54,7 +46,9 @@ describe('PktTag', () => {
       const { tag } = await createTagTest()
       expect(tag.closeTag).toBe(false)
       expect(tag.size).toBe('medium')
-      expect(tag.skin).toBe('blue')
+      expect(tag.skin).toBe('gray')
+      expect(tag.state).toBe(null)
+      expect(tag.textStyle).toBe('normal-text')
       expect(tag.type).toBe('button')
     })
 
@@ -76,6 +70,22 @@ describe('PktTag', () => {
     })
   })
 
+  describe('Forced States', () => {
+    test('applies forced state classes correctly', async () => {
+      for (const state of VALID_STATES) {
+        const { tag } = await createTagTest({ state })
+        const tagElement = tag.querySelector('span') || tag.querySelector('button')
+        expect(tagElement).toHaveClass(`pkt-tag--${state}`)
+      }
+    })
+
+    test('applies no state class by default', async () => {
+      const { tag } = await createTagTest()
+      const tagElement = tag.querySelector('span')
+      expect(tagElement?.className).not.toContain('pkt-tag--null')
+    })
+  })
+
   describe('Size Variations', () => {
     test('applies different size classes correctly', async () => {
       for (const size of VALID_SIZES) {
@@ -147,6 +157,11 @@ describe('PktTag', () => {
   })
 
   describe('Text Style', () => {
+    test('applies normal-text class by default', async () => {
+      const { tag } = await createTagTest()
+      expect(tag.querySelector('.pkt-tag')).toHaveClass('pkt-tag--normal-text')
+    })
+
     test('applies text style class when provided', async () => {
       const { tag } = await createTagTest({ textStyle: 'thin-text' })
       const tagElement = tag.querySelector('span') || tag.querySelector('button')

package/src/components/tag/tag.ts

@@ -3,26 +3,26 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { html, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { getSlotManager, slotContent } from '@/directives/slot-content'
-import specs from 'componentSpecs/tag.json'
 
 import '@/components/icon'
-import type { IAriaAttributes, THTMLButtonType, TPktSizeBase } from 'shared-types'
+import {
+  TAG_DEFAULTS,
+  type IPktTagBase,
+  type THTMLButtonType,
+  type TTagSkin,
+  type TTagState,
+  type TTagTextStyle,
+  type TPktSizeBase,
+} from 'shared-types'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { formatString, type IPktStringsProps } from 'shared-strings'
+import { formatString } from 'shared-strings'
 
-export type TTagSkin =
-  'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey'
+export type { TTagSkin, TTagState }
 export type TTagType = THTMLButtonType
 
-export interface IPktTag extends IPktStringsProps<'tag'> {
-  closeTag?: boolean
-  size?: TPktSizeBase
-  skin?: TTagSkin
-  textStyle?: string | null
+export interface IPktTag extends IPktTagBase {
   iconName?: PktIconName
-  type?: TTagType
-  ariaLabel?: IAriaAttributes['aria-label'] | null
 }
 
 export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
@@ -34,13 +34,14 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
   /**
    * Element attributes
    */
-  @property({ type: Boolean, reflect: true }) closeTag: boolean = specs.props.closeTag.default
-  @property({ type: String, reflect: true }) size: TPktSizeBase = specs.props.size
-    .default as TPktSizeBase
-  @property({ type: String, reflect: true }) skin: TTagSkin = specs.props.skin.default as TTagSkin
-  @property({ type: String, reflect: true }) textStyle: string | null = null
+  @property({ type: Boolean, reflect: true }) closeTag: boolean = TAG_DEFAULTS.closeTag
+  @property({ type: String, reflect: true }) size: TPktSizeBase = TAG_DEFAULTS.size
+  @property({ type: String, reflect: true }) skin: TTagSkin = TAG_DEFAULTS.skin
+  @property({ type: String, reflect: true }) state: TTagState | null = null
+  @property({ type: String, reflect: true }) textStyle: TTagTextStyle | null =
+    TAG_DEFAULTS.textStyle
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
-  @property({ type: String }) type: TTagType = specs.props.type.default as TTagType
+  @property({ type: String }) type: TTagType = TAG_DEFAULTS.type
   @property({ type: String }) ariaLabel: string | null = null
   @property({ type: Number, attribute: 'button-tabindex' }) buttonTabindex: number | undefined =
     undefined
@@ -78,7 +79,7 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
     this.dispatchEvent(
       new CustomEvent('close', { detail: { origin: event }, bubbles: false, composed: true }),
     )
-    // Historical support of old Vue implementations…
+    // Deprecated: beholdt for eldre Vue-oppsett. Bruk `close`, `on-close` fjernes i en senere hovedversjon.
     this.dispatchEvent(
       new CustomEvent('on-close', { detail: { origin: event }, bubbles: false, composed: true }),
     )
@@ -89,6 +90,7 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
       'pkt-tag': true,
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.state}`]: !!this.state,
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
     }
 
@@ -97,6 +99,7 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.state}`]: !!this.state,
       'pkt-hide': this._isClosed,
     }
 

package/dist/card-Da0JkVcv.cjs

@@ -1,64 +0,0 @@
-const e=require("./element-CEarCnHH.cjs"),t=require("./class-map-C82GtM1w.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-CeKuRE3_.cjs");require("./shared-types-BvRk9kiK.cjs"),require("./icon-B3YGHHa7.cjs");const i=require("./if-defined-Ci4ZQsgL.cjs");require("./tag-BgHEzLM3.cjs");var a=[`outlined`,`outlined-beige`,`gray`,`blue`,`beige`,`green`],o={headingLevel:3,layout:`vertical`,skin:`outlined`,padding:`default`,tagPosition:`top`,openLinkInNewTab:!1,borderOnHover:!0,zoom:!1,imageShape:`square`,restrictImageHeight:!1},s=class extends r.t{constructor(...e){super(...e),this.ariaLabel=``,this.metaLead=null,this.borderOnHover=o.borderOnHover,this.zoom=o.zoom,this.imageAspect=null,this.restrictImageHeight=o.restrictImageHeight,this.clickCardLink=null,this.metaTrail=null,this.layout=o.layout,this.heading=``,this.headingLevel=o.headingLevel,this.image={src:``,alt:``},this.imageShape=o.imageShape,this.openLinkInNewTab=o.openLinkInNewTab,this.padding=o.padding,this.skin=o.skin,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,"pkt-card--zoom":this.zoom},r=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=${i.t(this.clickCardLink?r: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,[`pkt-card__image-aspect-${this.imageAspect}`]:!!this.imageAspect,"pkt-card__image-restricted":this.restrictImageHeight};return e._`
-      ${this.image.src&&e._`
-          <div class=${t.t(n)}>
-            <img src=${this.image.src} alt=${this.image.alt||``} />
-          </div>
-        `}
-    `}renderHeadingTag(t,n){let r=this.headingLevel&&this.headingLevel>=1&&this.headingLevel<=6?this.headingLevel:3,i=`pkt-heading pkt-heading--medium pkt-heading--fw-regular ${t}`;switch(r){case 1:return e._`<h1 class=${i}>${n}</h1>`;case 2:return e._`<h2 class=${i}>${n}</h2>`;case 4:return e._`<h4 class=${i}>${n}</h4>`;case 5:return e._`<h5 class=${i}>${n}</h5>`;case 6:return e._`<h6 class=${i}>${n}</h6>`;default:return e._`<h3 class=${i}>${n}</h3>`}}renderHeading(){return!this.heading||this.clickCardLink?e.h:this.renderHeadingTag(`pkt-card__heading`,this.heading)}renderLinkHeading(){return this.clickCardLink?this.renderHeadingTag(`pkt-card__link-heading pkt-card__heading`,e._`<a
-        class="pkt-card__link"
-        href=${this.clickCardLink}
-        target=${this.openLinkInNewTab?`_blank`:`_self`}
-        rel=${i.t(this.openLinkInNewTab?`noopener noreferrer`:void 0)}
-        >${this.heading}</a
-      >`):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 r={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e._`
-      ${this.tags.length>0?e._`
-              <div
-                class=${t.t(r)}
-                role="list"
-                aria-label=${n.n(this.tags.length,this.pktStrings.get(`card`).tagsLabelOne,this.pktStrings.get(`card`).tagsLabelOther)}
-              >
-                ${this.tags.map(t=>e._`
-                    <pkt-tag
-                      role="listitem"
-                      textStyle="normal-text"
-                      size="medium"
-                      skin=${i.t(t.skin)}
-                      iconName=${i.t(t.iconName)}
-                    >
-                      <span>${t.text}</span>
-                    </pkt-tag>
-                  `)}
-              </div>
-            `:e.h}
-    `}renderSlot(){return e._`<section class="pkt-card__content">${r.i(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})],s.prototype,`ariaLabel`,void 0),e.n([e.u({type:String})],s.prototype,`metaLead`,void 0),e.n([e.u({type:Boolean})],s.prototype,`borderOnHover`,void 0),e.n([e.u({type:Boolean})],s.prototype,`zoom`,void 0),e.n([e.u({type:String})],s.prototype,`imageAspect`,void 0),e.n([e.u({type:Boolean})],s.prototype,`restrictImageHeight`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`clickCardLink`,void 0),e.n([e.u({type:String})],s.prototype,`metaTrail`,void 0),e.n([e.u({type:String})],s.prototype,`layout`,void 0),e.n([e.u({type:String})],s.prototype,`heading`,void 0),e.n([e.u({type:Number,attribute:`headinglevel`})],s.prototype,`headingLevel`,void 0),e.n([e.u({type:Object})],s.prototype,`image`,void 0),e.n([e.u({type:String})],s.prototype,`imageShape`,void 0),e.n([e.u({type:Boolean})],s.prototype,`openLinkInNewTab`,void 0),e.n([e.u({type:String})],s.prototype,`padding`,void 0),e.n([e.u({type:String,converter:{fromAttribute:e=>{let t=a;return e&&t.includes(e)?e:(e&&!t.includes(e)&&console.warn(`Invalid skin value "${e}". Using default skin "${o.skin}".`),o.skin)},toAttribute:e=>e}})],s.prototype,`skin`,void 0),e.n([e.u({type:String})],s.prototype,`subheading`,void 0),e.n([e.u({type:String})],s.prototype,`tagPosition`,void 0),e.n([e.u({type:Array})],s.prototype,`tags`,void 0);try{e.d(`pkt-card`)(s)}catch{console.warn(`Forsøker å definere <pkt-card>, 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/icon-B3YGHHa7.cjs

@@ -1 +0,0 @@
-const e=require("./element-CEarCnHH.cjs");require("./shared-types-BvRk9kiK.cjs");var t=`https://punkt-cdn.oslo.kommune.no/latest/icons/`,n=`https://punkt-cdn.oslo.kommune.no/latest/animations/`,r={name:``,path:t},i=class extends e.p{constructor(t){if(super(t),this.it=e.h,t.type!==e.m.CHILD)throw Error(this.constructor.directiveName+`() can only be used in child bindings`)}render(t){if(t===e.h||t==null)return this._t=void 0,this.it=t;if(t===e.g)return t;if(typeof t!=`string`)throw Error(this.constructor.directiveName+`() called with a non-string value`);if(t===this.it)return this._t;this.it=t;let n=[t];return n.raw=n,this._t={_$litType$:this.constructor.resultType,strings:n,values:[]}}};i.directiveName=`unsafeHTML`,i.resultType=1;var a=e.f(i),o=class extends i{};o.directiveName=`unsafeSVG`,o.resultType=2;var s=e.f(o);typeof window<`u`&&(window.pktFetch=window.pktFetch===void 0?fetch:window.pktFetch,window.pktIconPath=window.pktIconPath||r.path);var c=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>`,l={},u=2,d=1500,f=(()=>{try{return typeof Storage<`u`&&typeof sessionStorage<`u`}catch{return!1}})(),p=e=>window.pktFetch(e).then(t=>{if(!t.ok)throw Error(`Missing icon: `+e);return t.text()}),m=async(e,t=u)=>{try{return await p(e)}catch{return t>0?(await new Promise(e=>setTimeout(e,d)),m(e,t-1)):(console.error(`Failed to fetch icon: `+e),c)}},h=async(e,t)=>{let n=t+e+`.svg`;return f&&sessionStorage.getItem(n)?sessionStorage.getItem(n):n in l?l[n]:typeof window<`u`&&typeof window.pktFetch==`function`?(l[n]=m(n).then(e=>(e!==c&&f&&sessionStorage.setItem(n,e),delete l[n],e)),l[n]):c},g=class extends e.t{constructor(...e){super(...e),this.path=typeof window<`u`?window.pktIconPath:r.path,this.name=r.name,this.ariaHidden=null,this.ariaLabel=null,this.icon=s(c),this._updatedProps=[]}get effectiveAriaHidden(){return this.ariaHidden!==null&&this.ariaHidden!==void 0?this.ariaHidden===``||this.ariaHidden===`true`:!this.ariaLabel}get effectiveAriaLabel(){return this.effectiveAriaHidden?null:this.ariaLabel||this.name||null}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-icon`)}async attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),(e===`name`||e===`path`)&&this.getIcon(this.name)}async updated(e){super.updated(e),(e.has(`name`)||e.has(`path`))&&this.getIcon(this.name),this.applyAriaToSvg()}applyAriaToSvg(){let e=this.querySelector(`svg`);if(!e)return;e.setAttribute(`aria-hidden`,String(this.effectiveAriaHidden));let t=this.effectiveAriaLabel;t?e.setAttribute(`aria-label`,t):e.removeAttribute(`aria-label`)}async getIcon(e=``){if(this._updatedProps.length>0){this.path||=typeof window<`u`?window.pktIconPath:r.path;try{this.icon=s(await h(this.name||``,this.path))}catch{this.icon=s(c)}this._updatedProps=[]}else this._updatedProps.includes(e)||this._updatedProps.push(e)}render(){return e._`${this.name&&this.icon}`}};e.n([e.u({type:String,reflect:!1})],g.prototype,`path`,void 0),e.n([e.u({type:String,reflect:!0})],g.prototype,`name`,void 0),e.n([e.u({type:String,attribute:`aria-hidden`,reflect:!0})],g.prototype,`ariaHidden`,void 0),e.n([e.u({type:String,attribute:`aria-label`,reflect:!0})],g.prototype,`ariaLabel`,void 0),e.n([e.u({type:SVGElement})],g.prototype,`icon`,void 0),e.n([e.u({type:Array,noAccessor:!0})],g.prototype,`_updatedProps`,void 0);try{e.d(`pkt-icon`)(g)}catch{console.warn(`Forsøker å definere <pkt-icon>, men den er allerede definert`)}var _=g;Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});

package/dist/linkcard-BMJvjo7R.cjs

@@ -1,14 +0,0 @@
-const e=require("./element-CEarCnHH.cjs"),t=require("./element-with-slot-CeKuRE3_.cjs");require("./icon-B3YGHHa7.cjs");const n=require("./if-defined-Ci4ZQsgL.cjs");var r=class extends t.t{constructor(...e){super(...e),this.title=``,this.href=`#`,this.iconName=``,this.external=!1,this.openInNewTab=!1,this.skin=void 0}render(){let r=[`pkt-linkcard`,this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(` `),i=[`pkt-linkcard__title`,this.external&&`pkt-link pkt-link--external`].filter(Boolean).join(` `),a=this.pktStrings.get(`linkcard`),o=this.openInNewTab?a.openInNewTab:``;return e._`
-      <a
-        href=${this.href}
-        class=${r}
-        target=${this.openInNewTab?`_blank`:`_self`}
-        rel=${n.t(this.openInNewTab?`noopener noreferrer`:void 0)}
-      >
-        ${this.iconName&&e._`<pkt-icon class="pkt-link__icon" name="${this.iconName}"></pkt-icon>`}
-        ${this.title&&e._`<div class=${i}>${this.title}</div>`}
-        ${o?e._`<span class="pkt-sr-only">${o}</span>`:``}
-
-        <div class="pkt-linkcard__text">${t.i(this)}</div>
-      </a>
-    `}};e.n([e.u({type:String,reflect:!0})],r.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],r.prototype,`href`,void 0),e.n([e.u({type:String,reflect:!0})],r.prototype,`iconName`,void 0),e.n([e.u({type:Boolean,reflect:!0})],r.prototype,`external`,void 0),e.n([e.u({type:Boolean,reflect:!0})],r.prototype,`openInNewTab`,void 0),e.n([e.u({type:String,reflect:!0})],r.prototype,`skin`,void 0);try{e.d(`pkt-linkcard`)(r)}catch{console.warn(`Forsøker å definere <pkt-linkcard>, men den er allerede definert`)}var i=r;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/dist/messagebox-DFaDuvHQ.cjs

@@ -1,13 +0,0 @@
-const e=require("./element-CEarCnHH.cjs"),t=require("./class-map-C82GtM1w.cjs"),n=require("./element-with-slot-CeKuRE3_.cjs");require("./shared-types-BvRk9kiK.cjs"),require("./icon-B3YGHHa7.cjs");const r=require("./classutils-CbklAJDe.cjs");var i={skin:`beige`,compact:!1,closable:!1},a=class extends n.t{constructor(){super(),this.closable=i.closable,this.compact=i.compact,this.title=``,this.skin=i.skin,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!0}))},this._isClosed=!1}updated(e){super.updated(e),e.has(`_isClosed`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){let r={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:!!this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e._`<div class=${t.t(r)}>
-      ${this.closable?e._`<div class="pkt-messagebox__close">
-            <button
-              @click=${this.close}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-              aria-label=${this.pktStrings.get(`generic`).close}
-            >
-              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
-            </button>
-          </div>`:e.h}
-      ${this.title?e._`<div class="pkt-messagebox__title">${this.title}</div>`:e.h}
-      <div class="pkt-messagebox__text">${n.i(this)}</div>
-    </div>`}};e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`closable`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.n([e.l()],a.prototype,`_isClosed`,void 0);try{e.d(`pkt-messagebox`)(a)}catch{console.warn(`Forsøker å definere <pkt-messagebox>, 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/tag-BgHEzLM3.cjs

@@ -1,27 +0,0 @@
-const e=require("./element-CEarCnHH.cjs"),t=require("./class-map-C82GtM1w.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-CeKuRE3_.cjs");require("./icon-B3YGHHa7.cjs");const i=require("./if-defined-Ci4ZQsgL.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}willUpdate(e){if(super.willUpdate(e),this.closeTag&&!this.ariaLabel){let e=r.r(this).getNodes().map(e=>e.textContent??``).join(``).trim();e&&(this._ariaDescription=n.t(this.pktStrings.get(`tag`).remove,{label:e}))}}render(){let n={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.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.i(this)}</span>
-          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-        </button>
-      `:e._`
-        <span class=${t.t(n)}>
-          ${this.iconName&&e._`<pkt-icon
-              class="pkt-tag__icon"
-              name=${this.iconName}
-              aria-hidden="true"
-            ></pkt-icon>`}
-          <span>${r.i(this)}</span>
-        </span>
-      `}};e.n([e.u({type:Boolean,reflect:!0})],o.prototype,`closeTag`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`size`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`skin`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`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}});