@oslokommune/punkt-elements 19.20.0 → 20.0.0

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,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-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}});