@oslokommune/punkt-elements 19.11.0 → 19.12.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [19.12.0](https://github.com/oslokommune/punkt/compare/19.11.0...19.12.0) (2026-10-12)
+
+### Features
+* Fargeoppdateringer på Accordion, Button, Combobox og Datepicker, pluss 3 nye semantiske farger (#3716). - Tre nye nøytrale flatefarger som følger dunkelmodus: surface-subtle-default, surface-default-default og surface-strong-default
+  - Accordion: ny gray-skin, og borderless og border ser riktig ut i mørk modus. Beige og blue beholder lyse farger også i mørk modus
+  - Nytt: data-mode="light" gir lys modus inne i et mørkt område
+  - Datepicker: blå hover på datoer i dark mode og fetere skrift på valgte datoer
+  - Combobox: tagger er ***blå*** i stedet for *mørkeblå*, og lyseblå hover i begge moduser. "Legg til" og infofeltet har fått grå bakgrunn, og søkefeltet en tynn ramme
+  - Button: secondary fylles ikke lenger ved hover, fokus og klikk, bare ramme og tekst skifter farge. Tertiary har fått roligere hover og klikk, særlig i mørk modus
+
+---
+
+
 ## [19.11.0](https://github.com/oslokommune/punkt/compare/19.10.2...19.11.0) (2026-10-08)
 
 ### Features

package/dist/{accordion-CjGAmoQq.js → accordion-BlsqYbJf.js}

@@ -5,8 +5,8 @@ import { t as l } from "./if-defined-O59_I-e-.js";
 import { n as u, t as d } from "./consume-Bp12si68.js";
 import { t as f } from "./provide-_MnlMGnw.js";
 import { n as p, t as m } from "./ref-y_5qv9vU.js";
-//#region src/components/accordion/accordion-context.ts
-var h = u(Symbol("pkt-accordion-context")), g = class extends t {
+//#region ../../shared-types/accordion.ts
+var h = ["beige", "blue"], g = u(Symbol("pkt-accordion-context")), _ = class extends t {
 	constructor(...e) {
 		super(...e), this.ariaLabelledBy = "", this.compact = !1, this.skin = "borderless", this.name = "", this.context = { skin: this.skin };
 	}
@@ -55,27 +55,27 @@ i([a({
 	type: String,
 	reflect: !0,
 	attribute: "aria-labelledby"
-})], g.prototype, "ariaLabelledBy", void 0), i([a({
+})], _.prototype, "ariaLabelledBy", void 0), i([a({
 	type: Boolean,
 	reflect: !0,
 	attribute: "compact"
-})], g.prototype, "compact", void 0), i([a({
+})], _.prototype, "compact", void 0), i([a({
 	type: String,
 	reflect: !0,
 	attribute: "skin"
-})], g.prototype, "skin", void 0), i([a({
+})], _.prototype, "skin", void 0), i([a({
 	type: String,
 	reflect: !0,
 	attribute: "name"
-})], g.prototype, "name", void 0), i([f({ context: h }), r()], g.prototype, "context", void 0);
+})], _.prototype, "name", void 0), i([f({ context: g }), r()], _.prototype, "context", void 0);
 try {
-	n("pkt-accordion")(g);
+	n("pkt-accordion")(_);
 } catch {
 	console.warn("Forsøker å definere <pkt-accordion>, men den er allerede definert");
 }
 //#endregion
 //#region src/components/accordion/accordionitem.ts
-var _ = class extends c {
+var v = class extends c {
 	constructor() {
 		super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = !1, this.name = void 0, this.accordionItemRef = m();
 	}
@@ -87,7 +87,7 @@ var _ = class extends c {
 			"pkt-accordion-item": !0,
 			"pkt-accordion-item--compact": this.compact,
 			[`pkt-accordion-item--${this.skin}`]: !!this.skin
-		}, n = (this.skin ?? this.context?.skin) === "plus-minus";
+		}, n = this.skin ?? this.context?.skin, r = n === "plus-minus";
 		return e`
       <details
         class=${o(t)}
@@ -95,10 +95,11 @@ var _ = class extends c {
         ?open=${this.isOpen}
         ${p(this.accordionItemRef)}
         name=${l(this.name)}
+        data-mode=${l(n && h.includes(n) ? "light" : void 0)}
       >
         <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
           ${this.title}
-          ${n ? e`
+          ${r ? e`
                 <pkt-icon
                   name="plus-sign"
                   class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
@@ -128,29 +129,29 @@ var _ = class extends c {
     `;
 	}
 };
-i([a({ type: Boolean })], _.prototype, "defaultOpen", void 0), i([a({ type: String })], _.prototype, "title", void 0), i([a({
+i([a({ type: Boolean })], v.prototype, "defaultOpen", void 0), i([a({ type: String })], v.prototype, "title", void 0), i([a({
 	type: String,
 	reflect: !0
-})], _.prototype, "skin", void 0), i([a({
+})], v.prototype, "skin", void 0), i([a({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "compact", void 0), i([a({
+})], v.prototype, "compact", void 0), i([a({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "isOpen", void 0), i([a({
+})], v.prototype, "isOpen", void 0), i([a({
 	type: String,
 	reflect: !0
-})], _.prototype, "name", void 0), i([d({
-	context: h,
+})], v.prototype, "name", void 0), i([d({
+	context: g,
 	subscribe: !0
-}), a({ attribute: !1 })], _.prototype, "context", void 0);
+}), a({ attribute: !1 })], v.prototype, "context", void 0);
 try {
-	n("pkt-accordion-item")(_);
+	n("pkt-accordion-item")(v);
 } catch {
 	console.warn("Forsøker å definere <pkt-accordion-item>, men den er allerede definert");
 }
 //#endregion
 //#region src/components/accordion/index.ts
-var v = g;
+var y = _;
 //#endregion
-export { _ as n, g as r, v as t };
+export { v as n, _ as r, y as t };

package/dist/accordion-DukAa2ED.cjs

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

package/dist/{combobox-B0VWv9c_.js → combobox-2NTR70Ad.js}

@@ -689,7 +689,7 @@ var M = class extends j {
                 @mousedown=${i ? n : (e) => e.preventDefault()}
               >
                 <pkt-tag
-                  skin=${o || "blue-dark"}
+                  skin=${o || "blue"}
                   ?closeTag=${!this.isDisabled}
                   .buttonTabindex=${i ? void 0 : -1}
                   @close=${() => this.handleTagRemove(t)}

package/dist/{combobox-I8qdg8A4.cjs → combobox-Dlhm1iYr.cjs}

@@ -125,7 +125,7 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
                 @mousedown=${r?e.h:e=>e.preventDefault()}
               >
                 <pkt-tag
-                  skin=${a||`blue-dark`}
+                  skin=${a||`blue`}
                   ?closeTag=${!this.isDisabled}
                   .buttonTabindex=${r?void 0:-1}
                   @close=${()=>this.handleTagRemove(t)}

package/dist/{header-DLKiD7xm.js → header-DbV1G9bY.js}

@@ -13,7 +13,7 @@ import { n as b, t as x } from "./scroll-lock-BALd8hF9.js";
 import "./link-sO401Ieh.js";
 import "./textinput-wZSCpQgv.js";
 import "./searchinput-Bkcr3Fby.js";
-import "./header-menu-Ch135F5Y.js";
+import "./header-menu-F3tZZ5vO.js";
 //#region ../../shared-types/header.ts
 var S = (e) => typeof e.target == "string" ? {
 	title: e.title,

package/dist/{header-IQvyDow3.cjs → header-lgdaF8oa.cjs}

@@ -1,4 +1,4 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-CcJPCLgn.cjs"),i=require("./booleanish-BF8l4scU.cjs"),a=require("./fetch-header-footer-data-CUKV0biS.cjs");require("./icon-jPhyZD1z.cjs");const o=require("./if-defined-CiML3MTM.cjs");require("./button-BFG-7bDB.cjs");const s=require("./ref-CB7e9nMY.cjs"),c=require("./focus-trap-DSv4Ifqm.cjs"),l=require("./scroll-lock-B46ur0FF.cjs");require("./link-CRLAhYi0.cjs"),require("./textinput-C7JFm9jD.cjs"),require("./searchinput-Mdc9Ihld.cjs"),require("./header-menu-DpuxDU9a.cjs");var u=e=>typeof e.target==`string`?{title:e.title,iconName:e.iconName,href:e.target}:{title:e.title,iconName:e.iconName,onClick:e.target},d=e=>u(e),f=e=>{if(!e)return;let t=typeof e==`string`?new Date(e):e;if(!isNaN(t.getTime()))return t.toLocaleDateString(`nb-NO`,{day:`numeric`,month:`long`,year:`numeric`,hour:`2-digit`,minute:`2-digit`})},p=class{constructor(e,t){this.isMobile=!1,this.isTablet=!1,this.isHidden=!1,this.pauseScrollHide=!1,this.componentWidth=typeof window<`u`?window.innerWidth:0,this.lastScrollPosition=0,this.scrollLockToken=l.t(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1,this.handleScroll=()=>{if(this.getOptions().scrollBehavior!==`hide`||this.pauseScrollHide)return;let e=window.pageYOffset||document.documentElement.scrollTop;if(e<0||Math.abs(e-this.lastScrollPosition)<60)return;let t=e>this.lastScrollPosition;this.lastScrollPosition=e,t!==this.isHidden&&(this.isHidden=t,this.host.requestUpdate())},this.host=e,this.getOptions=t,e.addController(this)}hostConnected(){window.addEventListener(`scroll`,this.handleScroll)}hostDisconnected(){this.resizeObserver?.disconnect(),window.removeEventListener(`scroll`,this.handleScroll),l.n(this.scrollLockToken,!1)}observe(e){e&&(this.componentWidth=e.offsetWidth,this.refreshBreakpoints(),this.resizeObserver=new ResizeObserver(e=>{for(let t of e)this.componentWidth=t.borderBoxSize&&t.borderBoxSize.length>0?t.borderBoxSize[0].inlineSize:t.contentRect.width,this.refreshBreakpoints()}),this.resizeObserver.observe(e))}refreshBreakpoints(){let{mobileBreakpoint:e,tabletBreakpoint:t}=this.getOptions(),n=this.componentWidth<e,r=this.componentWidth<t;(n!==this.isMobile||r!==this.isTablet)&&(this.isMobile=n,this.isTablet=r,this.host.requestUpdate())}setScrollLock(e){l.n(this.scrollLockToken,e)}captureFocus(){this.lastFocusedElement=document.activeElement}flagRestoreFocus(){this.shouldRestoreFocus=!0}restoreFocus(){this.shouldRestoreFocus&&this.lastFocusedElement&&document.contains(this.lastFocusedElement)&&this.lastFocusedElement.focus(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1}},m=class extends e.t{constructor(...e){super(...e),this.canChangeRepresentation=!1,this.logoutOnClick=!1}handleChangeRepresentation(){this.dispatchEvent(new CustomEvent(`change-representation`,{bubbles:!0,composed:!0}))}handleLogout(){this.dispatchEvent(new CustomEvent(`log-out`,{bubbles:!0,composed:!0}))}handleMenuItemClick(e){`onClick`in e&&typeof e.onClick==`function`&&e.onClick()}renderLinkOrButton(n,r){let i=`href`in n,a=t.t({"pkt-user-menu__link":!0,"pkt-link-button":!i,"pkt-link":!i,"pkt-link--icon-left":!i,[r||``]:!!r});return i?e._`
+const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-CcJPCLgn.cjs"),i=require("./booleanish-BF8l4scU.cjs"),a=require("./fetch-header-footer-data-CUKV0biS.cjs");require("./icon-jPhyZD1z.cjs");const o=require("./if-defined-CiML3MTM.cjs");require("./button-BFG-7bDB.cjs");const s=require("./ref-CB7e9nMY.cjs"),c=require("./focus-trap-DSv4Ifqm.cjs"),l=require("./scroll-lock-B46ur0FF.cjs");require("./link-CRLAhYi0.cjs"),require("./textinput-C7JFm9jD.cjs"),require("./searchinput-Mdc9Ihld.cjs"),require("./header-menu-Cz7G7Q2R.cjs");var u=e=>typeof e.target==`string`?{title:e.title,iconName:e.iconName,href:e.target}:{title:e.title,iconName:e.iconName,onClick:e.target},d=e=>u(e),f=e=>{if(!e)return;let t=typeof e==`string`?new Date(e):e;if(!isNaN(t.getTime()))return t.toLocaleDateString(`nb-NO`,{day:`numeric`,month:`long`,year:`numeric`,hour:`2-digit`,minute:`2-digit`})},p=class{constructor(e,t){this.isMobile=!1,this.isTablet=!1,this.isHidden=!1,this.pauseScrollHide=!1,this.componentWidth=typeof window<`u`?window.innerWidth:0,this.lastScrollPosition=0,this.scrollLockToken=l.t(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1,this.handleScroll=()=>{if(this.getOptions().scrollBehavior!==`hide`||this.pauseScrollHide)return;let e=window.pageYOffset||document.documentElement.scrollTop;if(e<0||Math.abs(e-this.lastScrollPosition)<60)return;let t=e>this.lastScrollPosition;this.lastScrollPosition=e,t!==this.isHidden&&(this.isHidden=t,this.host.requestUpdate())},this.host=e,this.getOptions=t,e.addController(this)}hostConnected(){window.addEventListener(`scroll`,this.handleScroll)}hostDisconnected(){this.resizeObserver?.disconnect(),window.removeEventListener(`scroll`,this.handleScroll),l.n(this.scrollLockToken,!1)}observe(e){e&&(this.componentWidth=e.offsetWidth,this.refreshBreakpoints(),this.resizeObserver=new ResizeObserver(e=>{for(let t of e)this.componentWidth=t.borderBoxSize&&t.borderBoxSize.length>0?t.borderBoxSize[0].inlineSize:t.contentRect.width,this.refreshBreakpoints()}),this.resizeObserver.observe(e))}refreshBreakpoints(){let{mobileBreakpoint:e,tabletBreakpoint:t}=this.getOptions(),n=this.componentWidth<e,r=this.componentWidth<t;(n!==this.isMobile||r!==this.isTablet)&&(this.isMobile=n,this.isTablet=r,this.host.requestUpdate())}setScrollLock(e){l.n(this.scrollLockToken,e)}captureFocus(){this.lastFocusedElement=document.activeElement}flagRestoreFocus(){this.shouldRestoreFocus=!0}restoreFocus(){this.shouldRestoreFocus&&this.lastFocusedElement&&document.contains(this.lastFocusedElement)&&this.lastFocusedElement.focus(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1}},m=class extends e.t{constructor(...e){super(...e),this.canChangeRepresentation=!1,this.logoutOnClick=!1}handleChangeRepresentation(){this.dispatchEvent(new CustomEvent(`change-representation`,{bubbles:!0,composed:!0}))}handleLogout(){this.dispatchEvent(new CustomEvent(`log-out`,{bubbles:!0,composed:!0}))}handleMenuItemClick(e){`onClick`in e&&typeof e.onClick==`function`&&e.onClick()}renderLinkOrButton(n,r){let i=`href`in n,a=t.t({"pkt-user-menu__link":!0,"pkt-link-button":!i,"pkt-link":!i,"pkt-link--icon-left":!i,[r||``]:!!r});return i?e._`
         <pkt-link
           iconName=${n.iconName||e.h}
           href=${n.href}

package/dist/{header-menu-DpuxDU9a.cjs → header-menu-Cz7G7Q2R.cjs}

@@ -1,4 +1,4 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./booleanish-BF8l4scU.cjs"),r=require("./fetch-header-footer-data-CUKV0biS.cjs");require("./icon-jPhyZD1z.cjs"),require("./accordion-lbYihdiw.cjs");var i=class extends e.t{constructor(...e){super(...e),this.dataUrl=r.a,this.locale=`nb-NO`,this.open=!1,this.mobileBreakpoint=768,this.loadState=`idle`,this.isMobile=!1,this.menuWidth=0}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-header-menu`),this.updateOpenClass(),this.observeWidth(),this.data?(this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:this.data},bubbles:!0,composed:!0}))):this.loadData()}updateOpenClass(){this.classList.toggle(`pkt-header-menu--open`,!!this.open)}disconnectedCallback(){super.disconnectedCallback(),this.abortController?.abort(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0}updated(e){super.updated(e),e.has(`open`)&&this.updateOpenClass(),e.has(`mobileBreakpoint`)&&e.get(`mobileBreakpoint`)!==void 0&&this.refreshIsMobile(),e.has(`dataUrl`)&&e.get(`dataUrl`)!==void 0&&!this.data&&this.loadData(),e.has(`data`)&&e.get(`data`)!==void 0&&this.data&&(this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:this.data},bubbles:!0,composed:!0})))}observeWidth(){typeof ResizeObserver>`u`||(this.menuWidth=this.offsetWidth,this.refreshIsMobile(),this.resizeObserver=new ResizeObserver(e=>{for(let t of e)this.menuWidth=t.borderBoxSize&&t.borderBoxSize.length>0?t.borderBoxSize[0].inlineSize:t.contentRect.width,this.refreshIsMobile()}),this.resizeObserver.observe(this))}refreshIsMobile(){this.isMobile=this.menuWidth<this.mobileBreakpoint}async loadData(){this.abortController?.abort(),this.abortController=new AbortController,this.loadState=`loading`;try{let e=await r.t(this.dataUrl,this.abortController.signal);this.fetchedData=e,this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:e},bubbles:!0,composed:!0}))}catch(e){if(e.name===`AbortError`)return;this.loadState=`error`,this.dispatchEvent(new CustomEvent(`data-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}get effectiveData(){return this.data??this.fetchedData}get localeData(){return r.n(this.effectiveData,this.locale)}render(){if(this.loadState===`loading`)return e._`
+const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./booleanish-BF8l4scU.cjs"),r=require("./fetch-header-footer-data-CUKV0biS.cjs");require("./icon-jPhyZD1z.cjs"),require("./accordion-DukAa2ED.cjs");var i=class extends e.t{constructor(...e){super(...e),this.dataUrl=r.a,this.locale=`nb-NO`,this.open=!1,this.mobileBreakpoint=768,this.loadState=`idle`,this.isMobile=!1,this.menuWidth=0}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-header-menu`),this.updateOpenClass(),this.observeWidth(),this.data?(this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:this.data},bubbles:!0,composed:!0}))):this.loadData()}updateOpenClass(){this.classList.toggle(`pkt-header-menu--open`,!!this.open)}disconnectedCallback(){super.disconnectedCallback(),this.abortController?.abort(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0}updated(e){super.updated(e),e.has(`open`)&&this.updateOpenClass(),e.has(`mobileBreakpoint`)&&e.get(`mobileBreakpoint`)!==void 0&&this.refreshIsMobile(),e.has(`dataUrl`)&&e.get(`dataUrl`)!==void 0&&!this.data&&this.loadData(),e.has(`data`)&&e.get(`data`)!==void 0&&this.data&&(this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:this.data},bubbles:!0,composed:!0})))}observeWidth(){typeof ResizeObserver>`u`||(this.menuWidth=this.offsetWidth,this.refreshIsMobile(),this.resizeObserver=new ResizeObserver(e=>{for(let t of e)this.menuWidth=t.borderBoxSize&&t.borderBoxSize.length>0?t.borderBoxSize[0].inlineSize:t.contentRect.width,this.refreshIsMobile()}),this.resizeObserver.observe(this))}refreshIsMobile(){this.isMobile=this.menuWidth<this.mobileBreakpoint}async loadData(){this.abortController?.abort(),this.abortController=new AbortController,this.loadState=`loading`;try{let e=await r.t(this.dataUrl,this.abortController.signal);this.fetchedData=e,this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:e},bubbles:!0,composed:!0}))}catch(e){if(e.name===`AbortError`)return;this.loadState=`error`,this.dispatchEvent(new CustomEvent(`data-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}get effectiveData(){return this.data??this.fetchedData}get localeData(){return r.n(this.effectiveData,this.locale)}render(){if(this.loadState===`loading`)return e._`
         <nav aria-busy="true">
           <p class="pkt-header-menu__loading">${this.pktStrings.get(`header`).menuLoading}</p>
         </nav>

package/dist/{header-menu-Ch135F5Y.js → header-menu-F3tZZ5vO.js}

@@ -3,7 +3,7 @@ import { t as s } from "./class-map-Bf-QzUpN.js";
 import { t as c } from "./booleanish-OQJTYSrw.js";
 import { a as l, i as u, n as d, r as f, t as p } from "./fetch-header-footer-data-Pc32etrk.js";
 import "./icon-Bao96Zb8.js";
-import "./accordion-CjGAmoQq.js";
+import "./accordion-BlsqYbJf.js";
 //#region src/components/header-menu/header-menu.ts
 var m = class extends a {
 	constructor(...e) {

package/dist/pkt-accordion.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./accordion-lbYihdiw.cjs");exports.PktAccordion=e.r,exports.PktAccordionItem=e.n,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./accordion-DukAa2ED.cjs");exports.PktAccordion=e.r,exports.PktAccordionItem=e.n,exports.default=e.t;

package/dist/pkt-accordion.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./accordion-CjGAmoQq.js";
+import { n as e, r as t, t as n } from "./accordion-BlsqYbJf.js";
 export { t as PktAccordion, e as PktAccordionItem, n as default };

package/dist/pkt-combobox.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./combobox-I8qdg8A4.cjs");exports.PktCombobox=e.n,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./combobox-Dlhm1iYr.cjs");exports.PktCombobox=e.n,exports.default=e.t;

package/dist/pkt-combobox.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./combobox-B0VWv9c_.js";
+import { n as e, t } from "./combobox-2NTR70Ad.js";
 export { e as PktCombobox, t as default };

package/dist/pkt-header-menu.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./header-menu-DpuxDU9a.cjs");exports.PktHeaderMenu=e.n,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./header-menu-Cz7G7Q2R.cjs");exports.PktHeaderMenu=e.n,exports.default=e.t;

package/dist/pkt-header-menu.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./header-menu-Ch135F5Y.js";
+import { n as e, t } from "./header-menu-F3tZZ5vO.js";
 export { e as PktHeaderMenu, t as default };

package/dist/pkt-header.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./header-IQvyDow3.cjs");exports.PktHeader=e.t,exports.PktHeaderGlobal=e.n,exports.PktHeaderService=e.r,exports.PktHeaderUserMenu=e.i,exports.formatLastLoggedIn=e.a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./header-lgdaF8oa.cjs");exports.PktHeader=e.t,exports.PktHeaderGlobal=e.n,exports.PktHeaderService=e.r,exports.PktHeaderUserMenu=e.i,exports.formatLastLoggedIn=e.a;

package/dist/pkt-header.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./header-DLKiD7xm.js";
+import { a as e, i as t, n, r, t as i } from "./header-DbV1G9bY.js";
 export { i as PktHeader, n as PktHeaderGlobal, r as PktHeaderService, t as PktHeaderUserMenu, e as formatLastLoggedIn };

package/dist/pkt-index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./element-C6WTyJFE.cjs"),t=require("./consent-DBYZaCTp.cjs"),n=require("./alert-CuXM6TnC.cjs"),r=require("./header-IQvyDow3.cjs"),i=require("./card-Diivw_vm.cjs"),a=require("./checkbox-Dyyrw5TE.cjs"),o=require("./radiobutton-qTPNeZl5.cjs"),s=require("./icon-jPhyZD1z.cjs"),c=require("./messagebox-CR59jv8N.cjs"),l=require("./calendar-C5QwPrbk.cjs"),u=require("./combobox-I8qdg8A4.cjs"),d=require("./button-BFG-7bDB.cjs"),f=require("./accordion-lbYihdiw.cjs"),p=require("./backlink-CsFeerTH.cjs"),m=require("./breadcrumbs-D03id_ha.cjs"),h=require("./tag-BMtnaJ1A.cjs"),g=require("./input-wrapper-BwzajfFX.cjs"),_=require("./helptext-Bdv80rcs.cjs"),v=require("./checkbox-group-COWUvl52.cjs"),y=require("./fileupload-CyLRyoVU.cjs"),b=require("./modal-BKeSXrzi.cjs"),x=require("./progressbar-CnX4fFfR.cjs"),S=require("./datepicker-0NSvgPXK.cjs"),C=require("./footer-C6ajmlq2.cjs"),w=require("./link-CRLAhYi0.cjs"),T=require("./textinput-C7JFm9jD.cjs"),E=require("./searchinput-Mdc9Ihld.cjs"),D=require("./header-menu-DpuxDU9a.cjs"),O=require("./heading-BluavR6A.cjs"),k=require("./linkcard-DnZgMzqL.cjs"),A=require("./loader-Zo_VSsNw.cjs"),j=require("./radio-group-DaIRh-fL.cjs"),M=require("./tabs-R1Jzzj3-.cjs"),N=require("./textarea-DWLVisQX.cjs"),P=require("./select-CQpwjRPh.cjs"),F=require("./timepicker-DVyi8teh.cjs");exports.PktAccordion=f.r,exports.PktAccordionItem=f.n,exports.PktAlert=n.n,exports.PktBackLink=p.n,exports.PktBreadcrumbs=m.t,exports.PktButton=d.n,exports.PktCalendar=l.n,exports.PktCard=i.n,exports.PktCheckbox=a.n,exports.PktCheckboxGroup=v.n,exports.PktCombobox=u.n,exports.PktConsent=t.n,exports.PktDateTags=S.a,exports.PktDatepicker=S.t,Object.defineProperty(exports,"PktFileUpload",{enumerable:!0,get:function(){return y.n}}),exports.PktFooter=C.n,exports.PktFooterSimple=C.t,exports.PktHeader=r.t,exports.PktHeaderGlobal=r.n,exports.PktHeaderMenu=D.n,exports.PktHeaderService=r.r,exports.PktHeaderUserMenu=r.i,exports.PktHeading=O.n,exports.PktHelptext=_.n,exports.PktIcon=s.n,exports.PktInputWrapper=g.n,exports.PktLink=w.n,exports.PktLinkCard=k.n,exports.PktLoader=A.n,exports.PktMessagebox=c.n,exports.PktModal=b.n,exports.PktProgressbar=x.n,exports.PktRadioButton=o.n,exports.PktRadiobutton=o.n,exports.PktRadioGroup=j.n,exports.PktSearchInput=E.n,exports.PktSelect=P.n,exports.PktTabItem=M.n,exports.PktTabs=M.r,exports.PktTag=h.n,exports.PktTextarea=N.n,exports.PktTextinput=T.n,exports.PktTimepicker=F.t,exports.getPktStrings=e.r,exports.pktStringsNb=e.s,exports.resetPktStrings=e.i,exports.setPktStrings=e.a,exports.subscribePktStrings=e.o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./element-C6WTyJFE.cjs"),t=require("./consent-DBYZaCTp.cjs"),n=require("./alert-CuXM6TnC.cjs"),r=require("./header-lgdaF8oa.cjs"),i=require("./card-Diivw_vm.cjs"),a=require("./checkbox-Dyyrw5TE.cjs"),o=require("./radiobutton-qTPNeZl5.cjs"),s=require("./icon-jPhyZD1z.cjs"),c=require("./accordion-DukAa2ED.cjs"),l=require("./messagebox-CR59jv8N.cjs"),u=require("./calendar-C5QwPrbk.cjs"),d=require("./combobox-Dlhm1iYr.cjs"),f=require("./button-BFG-7bDB.cjs"),p=require("./backlink-CsFeerTH.cjs"),m=require("./breadcrumbs-D03id_ha.cjs"),h=require("./tag-BMtnaJ1A.cjs"),g=require("./input-wrapper-BwzajfFX.cjs"),_=require("./helptext-Bdv80rcs.cjs"),v=require("./checkbox-group-COWUvl52.cjs"),y=require("./fileupload-CyLRyoVU.cjs"),b=require("./modal-BKeSXrzi.cjs"),x=require("./progressbar-CnX4fFfR.cjs"),S=require("./datepicker-0NSvgPXK.cjs"),C=require("./footer-C6ajmlq2.cjs"),w=require("./link-CRLAhYi0.cjs"),T=require("./textinput-C7JFm9jD.cjs"),E=require("./searchinput-Mdc9Ihld.cjs"),D=require("./header-menu-Cz7G7Q2R.cjs"),O=require("./heading-BluavR6A.cjs"),k=require("./linkcard-DnZgMzqL.cjs"),A=require("./loader-Zo_VSsNw.cjs"),j=require("./radio-group-DaIRh-fL.cjs"),M=require("./tabs-R1Jzzj3-.cjs"),N=require("./textarea-DWLVisQX.cjs"),P=require("./select-CQpwjRPh.cjs"),F=require("./timepicker-DVyi8teh.cjs");exports.PktAccordion=c.r,exports.PktAccordionItem=c.n,exports.PktAlert=n.n,exports.PktBackLink=p.n,exports.PktBreadcrumbs=m.t,exports.PktButton=f.n,exports.PktCalendar=u.n,exports.PktCard=i.n,exports.PktCheckbox=a.n,exports.PktCheckboxGroup=v.n,exports.PktCombobox=d.n,exports.PktConsent=t.n,exports.PktDateTags=S.a,exports.PktDatepicker=S.t,Object.defineProperty(exports,"PktFileUpload",{enumerable:!0,get:function(){return y.n}}),exports.PktFooter=C.n,exports.PktFooterSimple=C.t,exports.PktHeader=r.t,exports.PktHeaderGlobal=r.n,exports.PktHeaderMenu=D.n,exports.PktHeaderService=r.r,exports.PktHeaderUserMenu=r.i,exports.PktHeading=O.n,exports.PktHelptext=_.n,exports.PktIcon=s.n,exports.PktInputWrapper=g.n,exports.PktLink=w.n,exports.PktLinkCard=k.n,exports.PktLoader=A.n,exports.PktMessagebox=l.n,exports.PktModal=b.n,exports.PktProgressbar=x.n,exports.PktRadioButton=o.n,exports.PktRadiobutton=o.n,exports.PktRadioGroup=j.n,exports.PktSearchInput=E.n,exports.PktSelect=P.n,exports.PktTabItem=M.n,exports.PktTabs=M.r,exports.PktTag=h.n,exports.PktTextarea=N.n,exports.PktTextinput=T.n,exports.PktTimepicker=F.t,exports.getPktStrings=e.r,exports.pktStringsNb=e.s,exports.resetPktStrings=e.i,exports.setPktStrings=e.a,exports.subscribePktStrings=e.o;

package/dist/pkt-index.js

@@ -1,16 +1,16 @@
 import { a as e, i as t, o as n, r, s as i } from "./element-DBugHPKM.js";
 import { n as a } from "./consent-BUS6GEUu.js";
 import { n as o } from "./alert-Xt26J9yX.js";
-import { i as s, n as c, r as l, t as u } from "./header-DLKiD7xm.js";
+import { i as s, n as c, r as l, t as u } from "./header-DbV1G9bY.js";
 import { n as d } from "./card-DCc3wfUb.js";
 import { n as f } from "./checkbox-CCBZc3Ix.js";
 import { n as p } from "./radiobutton-BJCSVvcQ.js";
 import { n as m } from "./icon-Bao96Zb8.js";
-import { n as h } from "./messagebox-CzaFlrYz.js";
-import { n as g } from "./calendar-D9w8M99G.js";
-import { n as _ } from "./combobox-B0VWv9c_.js";
-import { n as v } from "./button-DhCqyX4D.js";
-import { n as y, r as b } from "./accordion-CjGAmoQq.js";
+import { n as h, r as g } from "./accordion-BlsqYbJf.js";
+import { n as _ } from "./messagebox-CzaFlrYz.js";
+import { n as v } from "./calendar-D9w8M99G.js";
+import { n as y } from "./combobox-2NTR70Ad.js";
+import { n as b } from "./button-DhCqyX4D.js";
 import { n as x } from "./backlink-ogvv493Y.js";
 import { t as S } from "./breadcrumbs-53QVnTFP.js";
 import { n as C } from "./tag-uVXp7uP-.js";
@@ -25,7 +25,7 @@ import { n as M, t as N } from "./footer-L2vhQTAS.js";
 import { n as P } from "./link-sO401Ieh.js";
 import { n as F } from "./textinput-wZSCpQgv.js";
 import { n as I } from "./searchinput-Bkcr3Fby.js";
-import { n as L } from "./header-menu-Ch135F5Y.js";
+import { n as L } from "./header-menu-F3tZZ5vO.js";
 import { n as R } from "./heading-y72aIgB8.js";
 import { n as z } from "./linkcard-DdmGxzAP.js";
 import { n as B } from "./loader-Di5kHEQ4.js";
@@ -34,4 +34,4 @@ import { n as H, r as U } from "./tabs-DBW3P90Z.js";
 import { n as W } from "./textarea-553WDMEq.js";
 import { n as G } from "./select-CIAfUw8F.js";
 import { t as K } from "./timepicker-CMe0IbPm.js";
-export { b as PktAccordion, y as PktAccordionItem, o as PktAlert, x as PktBackLink, S as PktBreadcrumbs, v as PktButton, g as PktCalendar, d as PktCard, f as PktCheckbox, E as PktCheckboxGroup, _ as PktCombobox, a as PktConsent, A as PktDateTags, j as PktDatepicker, D as PktFileUpload, M as PktFooter, N as PktFooterSimple, u as PktHeader, c as PktHeaderGlobal, L as PktHeaderMenu, l as PktHeaderService, s as PktHeaderUserMenu, R as PktHeading, T as PktHelptext, m as PktIcon, w as PktInputWrapper, P as PktLink, z as PktLinkCard, B as PktLoader, h as PktMessagebox, O as PktModal, k as PktProgressbar, p as PktRadioButton, p as PktRadiobutton, V as PktRadioGroup, I as PktSearchInput, G as PktSelect, H as PktTabItem, U as PktTabs, C as PktTag, W as PktTextarea, F as PktTextinput, K as PktTimepicker, r as getPktStrings, i as pktStringsNb, t as resetPktStrings, e as setPktStrings, n as subscribePktStrings };
+export { g as PktAccordion, h as PktAccordionItem, o as PktAlert, x as PktBackLink, S as PktBreadcrumbs, b as PktButton, v as PktCalendar, d as PktCard, f as PktCheckbox, E as PktCheckboxGroup, y as PktCombobox, a as PktConsent, A as PktDateTags, j as PktDatepicker, D as PktFileUpload, M as PktFooter, N as PktFooterSimple, u as PktHeader, c as PktHeaderGlobal, L as PktHeaderMenu, l as PktHeaderService, s as PktHeaderUserMenu, R as PktHeading, T as PktHelptext, m as PktIcon, w as PktInputWrapper, P as PktLink, z as PktLinkCard, B as PktLoader, _ as PktMessagebox, O as PktModal, k as PktProgressbar, p as PktRadioButton, p as PktRadiobutton, V as PktRadioGroup, I as PktSearchInput, G as PktSelect, H as PktTabItem, U as PktTabs, C as PktTag, W as PktTextarea, F as PktTextinput, K as PktTimepicker, r as getPktStrings, i as pktStringsNb, t as resetPktStrings, e as setPktStrings, n as subscribePktStrings };

package/dist/shared-types/accordion.d.ts

@@ -9,8 +9,10 @@
  * bruk `IAccordionVisualProps` for delte visuelle props (`skin`, `compact`).
  */
 /** Accordion skin varianter — delt runtime source for types, specs, og Preview. */
-export declare const ACCORDION_SKINS: readonly ['borderless', 'outlined', 'beige', 'blue', 'plus-minus'];
+export declare const ACCORDION_SKINS: readonly ['borderless', 'outlined', 'gray', 'beige', 'blue', 'plus-minus'];
 export type TAccordionSkin = (typeof ACCORDION_SKINS)[number];
+/** Skins uten mørk variant. Radene får `data-mode="light"` og beholder lys modus. */
+export declare const ACCORDION_LIGHT_ONLY_SKINS: readonly TAccordionSkin[];
 /** Visual props delt med pkt-accordion og pkt-accordion-item. */
 export type IAccordionVisualProps = {
     skin?: TAccordionSkin;

package/dist/shared-types/index.d.ts

@@ -26,7 +26,7 @@ export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPosit
 export type { THTMLButtonType, TSelectionMode } from './form';
 export { INPUT_SIZES } from './size';
 export type { TPktInputSize, TSize3, TSize5, TSize7 } from './size';
-export { ACCORDION_SKINS } from './accordion';
+export { ACCORDION_LIGHT_ONLY_SKINS, ACCORDION_SKINS } from './accordion';
 export type { TAccordionSkin, IPktAccordionBase, IPktAccordionItemBase, IAccordionSpecProps, IAccordionItemSpecProps, IAccordionVisualProps, } from './accordion';
 export { BUTTON_SIZES, BUTTON_SKINS, BUTTON_COLORS, BUTTON_VARIANTS, BUTTON_STATES } from './button';
 export type { TPktButtonSize, TPktButtonSkin, TPktButtonColor, TPktButtonVariant, TPktButtonState, IPktButtonBase, IButtonSpecProps, } from './button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "19.11.0",
+  "version": "19.12.0",
   "description": "Komponentbiblioteket til Punkt, designsystem for Oslo kommune",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo kommune",
@@ -84,5 +84,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "d83cbdb71c65b51c7eb5270970a287c4eff8f19a"
+  "gitHead": "fff01ab9619d3c18548f18f239eccc7f841e1160"
 }

package/src/components/accordion/accordion.test.ts

@@ -123,7 +123,7 @@ describe('PktAccordion', () => {
     })
 
     test('applies different skin properties correctly', async () => {
-      const skins = ['borderless', 'outlined', 'beige', 'blue']
+      const skins = ['borderless', 'outlined', 'gray', 'beige', 'blue']
 
       for (const skin of skins) {
         const container = await createAccordion(`skin="${skin}"`)
@@ -349,7 +349,7 @@ describe('PktAccordionItem', () => {
     })
 
     test('applies different skin properties correctly', async () => {
-      const skins = ['borderless', 'outlined', 'beige', 'blue']
+      const skins = ['borderless', 'outlined', 'gray', 'beige', 'blue']
 
       for (const skin of skins) {
         const container = await createAccordion('', `skin="${skin}"`)
@@ -367,6 +367,38 @@ describe('PktAccordionItem', () => {
       }
     })
 
+    test('sets data-mode="light" on rows with a light-only skin', async () => {
+      for (const skin of ['beige', 'blue']) {
+        const container = await createAccordion(`skin="${skin}"`)
+        const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+        await accordionItem.updateComplete
+
+        expect(accordionItem.querySelector('details')).toHaveAttribute('data-mode', 'light')
+
+        container.remove()
+      }
+    })
+
+    test('does not set data-mode on other skins', async () => {
+      for (const skin of ['borderless', 'outlined', 'gray', 'plus-minus']) {
+        const container = await createAccordion(`skin="${skin}"`)
+        const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+        await accordionItem.updateComplete
+
+        expect(accordionItem.querySelector('details')).not.toHaveAttribute('data-mode')
+
+        container.remove()
+      }
+    })
+
+    test('item skin decides data-mode over accordion skin', async () => {
+      const container = await createAccordion('skin="beige"', 'skin="gray"')
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordionItem.updateComplete
+
+      expect(accordionItem.querySelector('details')).not.toHaveAttribute('data-mode')
+    })
+
     test('handles defaultOpen property', async () => {
       const container = await createAccordion('', '')
 

package/src/components/accordion/accordionitem.ts

@@ -4,7 +4,7 @@ import { consume } from '@lit/context'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
-import type { IPktAccordionItemBase } from 'shared-types'
+import { ACCORDION_LIGHT_ONLY_SKINS, type IPktAccordionItemBase } from 'shared-types'
 import { TPktAccordionSkin } from './accordion'
 import { accordionContext, type AccordionContext } from './accordion-context'
 import { classMap } from 'lit/directives/class-map.js'
@@ -61,6 +61,9 @@ export class PktAccordionItem extends PktElementWithSlot implements IPktAccordio
         ?open=${this.isOpen}
         ${ref(this.accordionItemRef)}
         name=${ifDefined(this.name)}
+        data-mode=${ifDefined(
+          actualSkin && ACCORDION_LIGHT_ONLY_SKINS.includes(actualSkin) ? 'light' : undefined,
+        )}
       >
         <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
           ${this.title}

package/src/components/combobox/combobox.selection.test.ts

@@ -117,6 +117,18 @@ describe('PktCombobox', () => {
       expect(tag).toBeInTheDocument()
     })
 
+    test('uses the blue tag skin when the option has no tagSkinColor', async () => {
+      const container = await createCombobox(
+        'id="test" name="test" label="Test" multiple value="apple"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = getDefaultOptions()
+      await combobox.updateComplete
+
+      const tag = combobox.querySelector('pkt-tag')
+      expect(tag).toHaveAttribute('skin', 'blue')
+    })
+
     test('selects option when clicking it in the open dropdown', async () => {
       const container = await createCombobox('id="test" name="test" label="Test"')
       const combobox = container.querySelector('pkt-combobox') as PktCombobox

package/src/components/combobox/combobox.ts

@@ -550,7 +550,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
                 @mousedown=${isOutside ? nothing : (e: MouseEvent) => e.preventDefault()}
               >
                 <pkt-tag
-                  skin=${tagSkinColor || 'blue-dark'}
+                  skin=${tagSkinColor || 'blue'}
                   ?closeTag=${!this.isDisabled}
                   .buttonTabindex=${isOutside ? undefined : -1}
                   @close=${() => this.handleTagRemove(value)}

package/dist/accordion-lbYihdiw.cjs

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