@oslokommune/punkt-elements 19.19.1 → 20.0.0

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/progressbar/progressbar.test.ts

@@ -32,8 +32,11 @@ describe('PktProgressbar', () => {
     })
 
     test('keeps the id on the host element', async () => {
-      document.body.innerHTML = '<pkt-progressbar id="min-framdrift" title="Framdrift"></pkt-progressbar>'
-      const progressbar = document.querySelector('pkt-progressbar') as CustomElementFor<'pkt-progressbar'>
+      document.body.innerHTML =
+        '<pkt-progressbar id="min-framdrift" title="Framdrift"></pkt-progressbar>'
+      const progressbar = document.querySelector(
+        'pkt-progressbar',
+      ) as CustomElementFor<'pkt-progressbar'>
       await progressbar.updateComplete
 
       expect(document.getElementById('min-framdrift')).toBe(progressbar)
@@ -57,7 +60,9 @@ describe('PktProgressbar', () => {
       const { progressbar } = await createProgressbarTest({ valueCurrent: 50 })
 
       expect(progressbar.valueCurrent).toBe(50)
-      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe(
+        'progressbar',
+      )
     })
   })
 
@@ -134,6 +139,39 @@ describe('PktProgressbar', () => {
       expect(statusElement?.textContent?.trim()).toContain('25 av 50')
     })
 
+    test('shows fraction relative to valueMin', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 25,
+        valueMin: 20,
+        valueMax: 30,
+        statusType: 'fraction',
+      })
+
+      const bar = progressbar.querySelector('.pkt-progressbar')
+      const barContainer = progressbar.querySelector<HTMLElement>('.pkt-progressbar__container')
+      expect(progressbar.querySelector('.pkt-progressbar__status')?.textContent?.trim()).toBe(
+        '5 av 10',
+      )
+      expect(bar?.getAttribute('aria-valuetext')).toBe('5 av 10')
+      expect(barContainer?.style.getPropertyValue('--pkt-progress-width')).toBe('50%')
+    })
+
+    test('uses the same bar width for fraction and percentage', async () => {
+      const widths: string[] = []
+      for (const statusType of ['fraction', 'percentage'] as const) {
+        const { progressbar } = await createProgressbarTest({
+          valueCurrent: 10,
+          valueMin: 1,
+          valueMax: 10,
+          statusType,
+        })
+        const barContainer = progressbar.querySelector<HTMLElement>('.pkt-progressbar__container')
+        widths.push(barContainer?.style.getPropertyValue('--pkt-progress-width') ?? '')
+        document.body.innerHTML = ''
+      }
+      expect(widths).toEqual(['100%', '100%'])
+    })
+
     test('hides status when statusType is none', async () => {
       const { progressbar } = await createProgressbarTest({
         valueCurrent: 50,
@@ -182,7 +220,9 @@ describe('PktProgressbar', () => {
       progressbar.valueCurrent = 80
       await progressbar.updateComplete
 
-      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('aria-valuenow')).toBe('80')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('aria-valuenow')).toBe(
+        '80',
+      )
     })
   })
 
@@ -190,7 +230,9 @@ describe('PktProgressbar', () => {
     test('uses progressbar role by default', async () => {
       const { progressbar } = await createProgressbarTest()
 
-      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe(
+        'progressbar',
+      )
       expect(progressbar.hasAttribute('role')).toBe(false)
     })
 

package/src/components/progressbar/progressbar.ts

@@ -6,64 +6,58 @@ import { PktElement } from '@/base-elements/element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { uuidish } from 'shared-utils/utils'
+import { formatString } from 'shared-strings'
+import {
+  PROGRESSBAR_DEFAULTS,
+  type IPktProgressbarBase,
+  type TAriaLive,
+  type TProgressbarRole,
+  type TProgressbarSkin,
+  type TProgressbarStatusPlacement,
+  type TProgressbarStatusType,
+  type TProgressbarTitlePosition,
+} from 'shared-types'
 
-import '@/components/icon'
-import type {
-  TAriaLive,
+export type {
   TProgressbarRole,
   TProgressbarSkin,
   TProgressbarStatusPlacement,
   TProgressbarStatusType,
   TProgressbarTitlePosition,
-} from 'shared-types'
-
-export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition }
+}
 
-export interface IPktProgressbar {
-  ariaLabel?: string | null
-  ariaLabelledby?: string | null
+export interface IPktProgressbar extends Omit<IPktProgressbarBase, 'ariaLive' | 'id'> {
   ariaLive?: TAriaLive | null
-  ariaValueText?: string | null
   id?: string | null
-  role?: TProgressbarRole
-  skin?: TProgressbarSkin
-  statusPlacement?: TProgressbarStatusPlacement
-  statusType?: TProgressbarStatusType
-  title?: string | null
-  titlePosition?: TProgressbarTitlePosition
-  valueCurrent: number
-  valueMax?: number
-  valueMin?: number
 }
 
-export class PktProgressbar extends PktElement implements IPktProgressbar {
-  constructor() {
-    super()
-  }
+export class PktProgressbar extends PktElement<IPktProgressbar> implements IPktProgressbar {
   // Public properties
   @property({ type: String }) ariaLabel: string | null = null
   @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 }) ariaLive: TAriaLive = PROGRESSBAR_DEFAULTS.ariaLive
   @property({ type: String, reflect: true }) id: string = uuidish()
-  @property({ type: String }) role: TProgressbarRole = 'progressbar'
-  @property({ type: String }) skin: TProgressbarSkin = 'dark-blue'
-  @property({ type: String }) statusPlacement: TProgressbarStatusPlacement = 'following'
-  @property({ type: String }) statusType: TProgressbarStatusType = 'none'
+  @property({ type: String }) role: TProgressbarRole = PROGRESSBAR_DEFAULTS.role
+  @property({ type: String }) skin: TProgressbarSkin = PROGRESSBAR_DEFAULTS.skin
+  @property({ type: String }) statusPlacement: TProgressbarStatusPlacement =
+    PROGRESSBAR_DEFAULTS.statusPlacement
+  @property({ type: String }) statusType: TProgressbarStatusType = PROGRESSBAR_DEFAULTS.statusType
   @property({ type: String, reflect: true }) title = ''
-  @property({ type: String }) titlePosition: TProgressbarTitlePosition = 'left'
-  @property({ type: Number, reflect: true }) valueCurrent = 0
-  @property({ type: Number }) valueMax = 100
-  @property({ type: Number }) valueMin = 0
+  @property({ type: String }) titlePosition: TProgressbarTitlePosition =
+    PROGRESSBAR_DEFAULTS.titlePosition
+  @property({ type: Number, reflect: true }) valueCurrent: number =
+    PROGRESSBAR_DEFAULTS.valueCurrent
+  @property({ type: Number }) valueMax: number = PROGRESSBAR_DEFAULTS.valueMax
+  @property({ type: Number }) valueMin: number = PROGRESSBAR_DEFAULTS.valueMin
 
   // State
   private labelWidth = 0
   @state() private progressbarId: string = this.id
-  @state() private resolvedRole: TProgressbarRole = 'progressbar'
+  @state() private resolvedRole: TProgressbarRole = PROGRESSBAR_DEFAULTS.role
 
   // Private refs
   private labelRef: Ref<HTMLSpanElement> = createRef()
-  private progressBarRef: Ref<HTMLDivElement> = createRef()
   private containerRef: Ref<HTMLDivElement> = createRef()
 
   protected willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
@@ -97,17 +91,17 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
   render() {
     const hasStatus = this.statusType !== 'none'
     const totalSteps = this.valueMax - this.valueMin
-    const percentageOfSteps = (this.valueCurrent / totalSteps) * 100
-    const currentPercentage =
-      this.statusType === 'fraction'
-        ? Math.round(percentageOfSteps)
-        : Math.round(((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin)) * 100)
+    const currentStep = this.valueCurrent - this.valueMin
+    const currentPercentage = Math.round((currentStep / totalSteps) * 100)
 
-    const formattedTitle = `${this.valueCurrent} av ${totalSteps}`
+    const formattedTitle = formatString(this.pktStrings.get('progressbar').fraction, {
+      current: currentStep,
+      total: totalSteps,
+    })
 
     const computedAriaValueText =
       this.statusType === 'fraction' && !this.ariaValueText
-        ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+        ? formattedTitle
         : this.ariaValueText || ''
     const computedAriaLabelledby = this.ariaLabel
       ? undefined
@@ -132,7 +126,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
     })
 
     return html`<div
-      ${ref(this.progressBarRef)}
       role=${this.resolvedRole}
       aria-live=${ifDefined(this.ariaLive || undefined)}
       aria-atomic="true"
@@ -152,25 +145,28 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
           '--pkt-progress-width': `${currentPercentage}%`,
         })}
       >
-        ${this.title
-          ? html`<p id=${`${this.progressbarId}-title`} class=${titleClasses}>${this.title}</p>`
-          : nothing}
+        ${
+          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}
+        ${
+          hasStatus
+            ? html`<div class=${statusClasses}>
+                <span class=${placementClasses} ${ref(this.labelRef)}>
+                  ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
+                </span>
+              </div>`
+            : nothing
+        }
       </div>
     </div>`
   }
-
 }
 
 export default PktProgressbar

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,8 @@ 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.type).toBe('button')
     })
 
@@ -76,6 +69,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) {

package/src/components/tag/tag.ts

@@ -6,19 +6,25 @@ 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 type {
+  IAriaAttributes,
+  THTMLButtonType,
+  TTagSkin,
+  TTagState,
+  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'
 
-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
+  state?: TTagState | null
   textStyle?: string | null
   iconName?: PktIconName
   type?: TTagType
@@ -38,6 +44,7 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
   @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 }) state: TTagState | null = null
   @property({ type: String, reflect: true }) textStyle: string | null = null
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String }) type: TTagType = specs.props.type.default as TTagType
@@ -89,6 +96,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 +105,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-mi3VKIoy.cjs

@@ -1,64 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-B0Vp_OuR.cjs");require("./shared-types-BvRk9kiK.cjs"),require("./icon-CrG6o7ZE.cjs");const i=require("./if-defined-CiML3MTM.cjs");require("./tag-DrFK8Wq3.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-CrG6o7ZE.cjs

@@ -1 +0,0 @@
-const e=require("./element-C6WTyJFE.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/if-defined-CiML3MTM.cjs

@@ -1 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs");var t=t=>t??e.h;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});