@oslokommune/punkt-elements 12.18.11 → 12.18.13

package/dist/{datepicker-BoXR-BiS.cjs → datepicker-BUUPN2Ak.cjs}

@@ -1,4 +1,4 @@
-"use strict";const $=require("./class-map-Boa7BqCc.cjs"),k=require("./if-defined-DEDlGbAc.cjs"),s=require("./icon-CdMQ6zBT.cjs"),T=require("./state-SKYD8kRO.cjs"),g=require("./calendar-QSulz7im.cjs"),S=require("./input-element-BxMdqhqV.cjs"),r=require("./ref-DCOsLZQg.cjs");require("./input-wrapper-BKTwBjxo.cjs");require("./tag-Du8P8YIp.cjs");/**
+"use strict";const $=require("./class-map-Boa7BqCc.cjs"),k=require("./if-defined-DEDlGbAc.cjs"),s=require("./icon-CdMQ6zBT.cjs"),T=require("./state-SKYD8kRO.cjs"),g=require("./calendar-QSulz7im.cjs"),S=require("./input-element-BxMdqhqV.cjs"),r=require("./ref-DCOsLZQg.cjs");require("./input-wrapper-DraeSNb6.cjs");require("./tag-Du8P8YIp.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{datepicker-BueebQSJ.js → datepicker-DjQe8CZo.js}

@@ -5,7 +5,7 @@ import { r as V } from "./state-BfyXV7EL.js";
 import { n as D, f as _, a as N, b as E, d as A } from "./calendar-BUqcNvfI.js";
 import { P as U } from "./input-element--t-9j6bw.js";
 import { p as K, v as y, r as w, M as I, m as W, e as R, n as $ } from "./ref-DuFGTLVX.js";
-import "./input-wrapper-CvH9cWvH.js";
+import "./input-wrapper-CWD6Lvr-.js";
 import "./tag-DlnEKEym.js";
 /**
  * @license

package/dist/index.d.ts

@@ -24,18 +24,20 @@ declare interface IPktModal {
 }
 
 export declare interface IPktProgressbar {
+    ariaLabel?: string | null;
+    ariaLabelledby?: string | null;
+    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;
-    ariaValueText?: string;
-    skin?: TProgressbarSkin;
-    title?: string;
-    titlePosition?: TProgressbarTitlePosition;
-    statusType?: TProgressbarStatusType;
-    statusPlacement?: TProgressbarStatusPlacement;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    role?: TProgressbarRole;
 }
 
 declare interface IPktSelect {
@@ -455,25 +457,33 @@ export declare class PktModal extends PktElement implements IPktModal {
 }
 
 export declare class PktProgressbar extends PktElement implements IPktProgressbar {
-    valueCurrent: number;
-    valueMax: number;
-    valueMin: number;
+    constructor();
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    ariaValueText: string | null;
+    ariaLive: TAriaLive;
+    id: string;
+    role: TProgressbarRole;
     skin: TProgressbarSkin;
+    statusPlacement: TProgressbarStatusPlacement;
+    statusType: TProgressbarStatusType;
     title: string;
     titlePosition: TProgressbarTitlePosition;
-    statusType: TProgressbarStatusType;
-    statusPlacement: TProgressbarStatusPlacement;
-    ariaLabel: string;
-    ariaLabelledby: string;
-    ariaValueText: string;
-    role: TProgressbarRole;
+    valueCurrent: number;
+    valueMax: number;
+    valueMin: number;
     private labelWidth;
-    private progressBarId;
+    private progressbarId;
+    private computedAriaLabelledby;
+    private computedAriaValueText;
     private labelRef;
     private progressBarRef;
     firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): TemplateResult<1>;
+    private setComputedValues;
+    private syncAttributes;
+    private _handleAttribute;
 }
 
 /**

package/dist/{input-wrapper-CvH9cWvH.js → input-wrapper-CWD6Lvr-.js}

@@ -54,6 +54,7 @@ let t = class extends w {
           ${this.counterCurrent || 0}
           ${this.counterMaxLength ? `/${this.counterMaxLength}` : l}
         </div>` : l, y = () => this.hasError && this.errorMessage ? p`<div
+          role="alert"
           class="pkt-alert pkt-alert--error pkt-alert--compact"
           aria-live="assertive"
           aria-atomic="true"

package/dist/{input-wrapper-BKTwBjxo.cjs → input-wrapper-DraeSNb6.cjs}

@@ -21,6 +21,7 @@
           ${this.counterCurrent||0}
           ${this.counterMaxLength?`/${this.counterMaxLength}`:t.E}
         </div>`:t.E,b=()=>this.hasError&&this.errorMessage?t.x`<div
+          role="alert"
           class="pkt-alert pkt-alert--error pkt-alert--compact"
           aria-live="assertive"
           aria-atomic="true"

package/dist/pkt-datepicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-BoXR-BiS.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-BUUPN2Ak.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;

package/dist/pkt-datepicker.js

@@ -1,4 +1,4 @@
-import { P as t } from "./datepicker-BueebQSJ.js";
+import { P as t } from "./datepicker-DjQe8CZo.js";
 const a = t;
 export {
   t as PktDatepicker,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-DfjFhisP.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-DY2rbosk.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),b=require("./datepicker-BoXR-BiS.cjs"),g=require("./helptext-iZEgxz2U.cjs"),h=require("./input-wrapper-BKTwBjxo.cjs"),m=require("./link-DTldg4W2.cjs"),f=require("./linkcard-C5GUN22k.cjs"),y=require("./messagebox-DLsgkPtN.cjs"),v=require("./modal-B-n1mhZ1.cjs"),x=require("./progressbar-CuXkbAhJ.cjs"),C=require("./tag-Du8P8YIp.cjs"),O=require("./textarea-CJauH-oJ.cjs"),j=require("./textinput-CDvSlCLl.cjs"),q=require("./select-Bz4TH4OJ.cjs");var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?$(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&S(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-DfjFhisP.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-DY2rbosk.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),b=require("./datepicker-BUUPN2Ak.cjs"),g=require("./helptext-iZEgxz2U.cjs"),h=require("./input-wrapper-DraeSNb6.cjs"),m=require("./link-DTldg4W2.cjs"),f=require("./linkcard-C5GUN22k.cjs"),y=require("./messagebox-DLsgkPtN.cjs"),v=require("./modal-B-n1mhZ1.cjs"),x=require("./progressbar-872kMPws.cjs"),C=require("./tag-Du8P8YIp.cjs"),O=require("./textarea-DPTHMOSZ.cjs"),j=require("./textinput-OmztIgoC.cjs"),q=require("./select-CFdjp5Sk.cjs");var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?$(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&S(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${P.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -7,18 +7,18 @@ import { a as D } from "./icon-wUXeHiBk.js";
 import { P as x } from "./pkt-slot-controller-DsYpzJ9b.js";
 import { e as m, n as d } from "./ref-DuFGTLVX.js";
 import { e as u } from "./class-map-hz16xq5a.js";
-import { P as G } from "./datepicker-BueebQSJ.js";
+import { P as G } from "./datepicker-DjQe8CZo.js";
 import { P as M } from "./helptext--4FLdAWi.js";
-import { P as B } from "./input-wrapper-CvH9cWvH.js";
+import { P as B } from "./input-wrapper-CWD6Lvr-.js";
 import { P as N } from "./link-CWGiizQI.js";
 import { P as W } from "./linkcard-BkgsoZ7N.js";
 import { P as z } from "./messagebox-CtWD9b0a.js";
 import { P as J } from "./modal-CV7Wyhsa.js";
-import { P as V } from "./progressbar-BS_oawSB.js";
+import { P as V } from "./progressbar-KBLmOgxm.js";
 import { P as Y } from "./tag-DlnEKEym.js";
-import { P as tt } from "./textarea-CRHf9Jri.js";
-import { P as rt } from "./textinput-D46zLo13.js";
-import { P as ot } from "./select-Djqz3LXr.js";
+import { P as tt } from "./textarea-8VOlYKdT.js";
+import { P as rt } from "./textinput-D2uB8zkQ.js";
+import { P as ot } from "./select-ACWsh3Q4.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);

package/dist/pkt-input-wrapper.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./input-wrapper-BKTwBjxo.cjs"),t=e.PktInputWrapper;Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>e.PktInputWrapper});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./input-wrapper-DraeSNb6.cjs"),t=e.PktInputWrapper;Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>e.PktInputWrapper});exports.default=t;

package/dist/pkt-input-wrapper.js

@@ -1,4 +1,4 @@
-import { P as p } from "./input-wrapper-CvH9cWvH.js";
+import { P as p } from "./input-wrapper-CWD6Lvr-.js";
 const r = p;
 export {
   p as PktInputWrapper,

package/dist/pkt-progressbar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./progressbar-CuXkbAhJ.cjs");Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>e.PktProgressbar});exports.default=e.PktProgressbar$1;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./progressbar-872kMPws.cjs");Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>e.PktProgressbar});exports.default=e.PktProgressbar$1;

package/dist/pkt-progressbar.js

@@ -1,5 +1,5 @@
-import { a } from "./progressbar-BS_oawSB.js";
-import { P as t } from "./progressbar-BS_oawSB.js";
+import { a } from "./progressbar-KBLmOgxm.js";
+import { P as t } from "./progressbar-KBLmOgxm.js";
 export {
   t as PktProgressbar,
   a as default

package/dist/pkt-select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./select-Bz4TH4OJ.cjs"),t=e.PktSelect;Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>e.PktSelect});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./select-CFdjp5Sk.cjs"),t=e.PktSelect;Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>e.PktSelect});exports.default=t;

package/dist/pkt-select.js

@@ -1,4 +1,4 @@
-import { P as t } from "./select-Djqz3LXr.js";
+import { P as t } from "./select-ACWsh3Q4.js";
 const a = t;
 export {
   t as PktSelect,

package/dist/pkt-textarea.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textarea-CJauH-oJ.cjs"),t=e.PktTextarea;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>e.PktTextarea});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textarea-DPTHMOSZ.cjs"),t=e.PktTextarea;Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>e.PktTextarea});exports.default=t;

package/dist/pkt-textarea.js

@@ -1,4 +1,4 @@
-import { P as a } from "./textarea-CRHf9Jri.js";
+import { P as a } from "./textarea-8VOlYKdT.js";
 const e = a;
 export {
   a as PktTextarea,

package/dist/pkt-textinput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textinput-CDvSlCLl.cjs"),t=e.PktTextinput;Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>e.PktTextinput});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./textinput-OmztIgoC.cjs"),t=e.PktTextinput;Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>e.PktTextinput});exports.default=t;

package/dist/pkt-textinput.js

@@ -1,4 +1,4 @@
-import { P as t } from "./textinput-D46zLo13.js";
+import { P as t } from "./textinput-D2uB8zkQ.js";
 const p = t;
 export {
   t as PktTextinput,

package/dist/progressbar-872kMPws.cjs

@@ -0,0 +1,21 @@
+"use strict";const n=require("./class-map-Boa7BqCc.cjs"),e=require("./icon-CdMQ6zBT.cjs"),p=require("./state-SKYD8kRO.cjs"),h=require("./ref-DCOsLZQg.cjs"),b=require("./stringutils-CkVRq4jP.cjs");/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const d="important",P=" !"+d,v=e.e(class extends e.i{constructor(l){var t;if(super(l),l.type!==e.t$1.ATTRIBUTE||l.name!=="style"||((t=l.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(l){return Object.keys(l).reduce((t,s)=>{const r=l[s];return r==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(l,[t]){const{style:s}=l.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?s.removeProperty(r):s[r]=null);for(const r in t){const i=t[r];if(i!=null){this.ft.add(r);const o=typeof i=="string"&&i.endsWith(P);r.includes("-")||o?s.setProperty(r,o?i.slice(0,-11):i,o?d:""):s[r]=i}}return e.T}});var f=Object.defineProperty,k=Object.getOwnPropertyDescriptor,a=(l,t,s,r)=>{for(var i=r>1?void 0:r?k(t,s):t,o=l.length-1,u;o>=0;o--)(u=l[o])&&(i=(r?u(t,s,i):u(i))||i);return r&&i&&f(t,s,i),i};exports.PktProgressbar=class extends e.PktElement{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive="polite",this.id=b.uuidish(),this.role="progressbar",this.skin="dark-blue",this.statusPlacement="following",this.statusType="none",this.title="",this.titlePosition="left",this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.labelWidth=0,this.progressbarId=this.id,this.computedAriaLabelledby=null,this.computedAriaValueText="",this.labelRef=h.e(),this.progressBarRef=h.e()}firstUpdated(t){super.firstUpdated(t),this.setComputedValues(),this.syncAttributes()}updated(t){super.updated(t),t.has("valueCurrent")&&this.labelRef.value&&(this.labelWidth=this.labelRef.value.getBoundingClientRect().width||0),t.has("id")&&this.id&&(this.progressBarId=this.id),(t.has("statusType")||t.has("id")||t.has("ariaLabelledby"))&&(this.progressbarId=this.id||b.uuidish(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`),(t.has("ariaValueText")||t.has("valueCurrent")||t.has("valueMax"))&&(this.computedAriaValueText=this.statusType==="fraction"&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||""),this.syncAttributes()}render(){const t=this.statusType!=="none",s=this.valueMax-this.valueMin,r=this.valueCurrent/s*100,i=this.statusType==="fraction"?Math.round(r):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),o=`${this.valueCurrent} av ${s}`,u=n.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),c=n.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),g=n.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),y=n.e({"pkt-progressbar__status-placement--following":this.statusPlacement==="following","pkt-progressbar__status-placement--center":this.statusPlacement==="center","pkt-progressbar__status-placement--left":this.statusPlacement==="left"});return e.x` <div
+      class="pkt-progressbar__container"
+      .ref=${this.progressBarRef}
+      style=${v({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${i}%`})}
+    >
+      ${this.title?e.x`<p id=${`${this.progressBarId}-title`} class=${c}>${this.title}</p>`:e.E}
+
+      <div class="pkt-progressbar__bar-wrapper">
+        <div class=${u}></div>
+      </div>
+
+      ${t?e.x`<div class=${g}>
+            <span class=${y} ${h.n(this.labelRef)}>
+              ${this.statusType==="percentage"?`${i}%`:o}
+            </span>
+          </div>`:e.E}
+    </div>`}setComputedValues(){this.progressbarId=this.id||b.uuidish(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`,this.computedAriaValueText=this.statusType==="fraction"&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||""}syncAttributes(){this._handleAttribute("aria-live",this.ariaLive),this._handleAttribute("aria-valuenow",this.valueCurrent),this._handleAttribute("aria-valuemin",this.valueMin),this._handleAttribute("aria-valuemax",this.valueMax),this._handleAttribute("aria-valuetext",this.computedAriaValueText),this._handleAttribute("aria-label",this.ariaLabel),this._handleAttribute("role",this.role),this._handleAttribute("aria-atomic","true"),this._handleAttribute("id",this.progressbarId),this.ariaLabel||this._handleAttribute("aria-labelledby",this.computedAriaLabelledby)}_handleAttribute(t,s){s==null||s===""?this.removeAttribute(t):this.setAttribute(t,String(s))}};a([e.n({type:String})],exports.PktProgressbar.prototype,"ariaLabel",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabelledby",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaValueText",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"ariaLive",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"id",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"role",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"skin",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"statusPlacement",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"statusType",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"title",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"titlePosition",2);a([e.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueCurrent",2);a([e.n({type:Number})],exports.PktProgressbar.prototype,"valueMax",2);a([e.n({type:Number})],exports.PktProgressbar.prototype,"valueMin",2);a([p.r()],exports.PktProgressbar.prototype,"labelWidth",2);a([p.r()],exports.PktProgressbar.prototype,"progressbarId",2);a([p.r()],exports.PktProgressbar.prototype,"computedAriaLabelledby",2);a([p.r()],exports.PktProgressbar.prototype,"computedAriaValueText",2);exports.PktProgressbar=a([e.t("pkt-progressbar")],exports.PktProgressbar);const _=exports.PktProgressbar;exports.PktProgressbar$1=_;

package/dist/progressbar-KBLmOgxm.js

@@ -0,0 +1,160 @@
+import { e as n } from "./class-map-hz16xq5a.js";
+import { e as g, i as _, b as $, T as A, P as x, x as b, E as c, n as u, t as T } from "./icon-wUXeHiBk.js";
+import { r as h } from "./state-BfyXV7EL.js";
+import { e as y, n as k } from "./ref-DuFGTLVX.js";
+import { u as d } from "./stringutils-DJjRa8dG.js";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const v = "important", C = " !" + v, M = g(class extends _ {
+  constructor(t) {
+    var e;
+    if (super(t), t.type !== $.ATTRIBUTE || t.name !== "style" || ((e = t.strings) == null ? void 0 : e.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+  }
+  render(t) {
+    return Object.keys(t).reduce((e, a) => {
+      const s = t[a];
+      return s == null ? e : e + `${a = a.includes("-") ? a : a.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
+  }
+  update(t, [e]) {
+    const { style: a } = t.element;
+    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
+    for (const s of this.ft) e[s] == null && (this.ft.delete(s), s.includes("-") ? a.removeProperty(s) : a[s] = null);
+    for (const s in e) {
+      const l = e[s];
+      if (l != null) {
+        this.ft.add(s);
+        const o = typeof l == "string" && l.endsWith(C);
+        s.includes("-") || o ? a.setProperty(s, o ? l.slice(0, -11) : l, o ? v : "") : a[s] = l;
+      }
+    }
+    return A;
+  }
+});
+var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (t, e, a, s) => {
+  for (var l = s > 1 ? void 0 : s ? S(e, a) : e, o = t.length - 1, p; o >= 0; o--)
+    (p = t[o]) && (l = (s ? p(e, a, l) : p(l)) || l);
+  return s && l && L(e, a, l), l;
+};
+let r = class extends x {
+  constructor() {
+    super(), this.ariaLabel = null, this.ariaLabelledby = null, this.ariaValueText = null, this.ariaLive = "polite", this.id = d(), this.role = "progressbar", this.skin = "dark-blue", this.statusPlacement = "following", this.statusType = "none", this.title = "", this.titlePosition = "left", this.valueCurrent = 0, this.valueMax = 100, this.valueMin = 0, this.labelWidth = 0, this.progressbarId = this.id, this.computedAriaLabelledby = null, this.computedAriaValueText = "", this.labelRef = y(), this.progressBarRef = y();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.setComputedValues(), this.syncAttributes();
+  }
+  updated(t) {
+    super.updated(t), t.has("valueCurrent") && this.labelRef.value && (this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0), t.has("id") && this.id && (this.progressBarId = this.id), (t.has("statusType") || t.has("id") || t.has("ariaLabelledby")) && (this.progressbarId = this.id || d(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`), (t.has("ariaValueText") || t.has("valueCurrent") || t.has("valueMax")) && (this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || ""), this.syncAttributes();
+  }
+  render() {
+    const t = this.statusType !== "none", e = this.valueMax - this.valueMin, a = this.valueCurrent / e * 100, s = this.statusType === "fraction" ? Math.round(a) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), l = `${this.valueCurrent} av ${e}`, o = n({
+      "pkt-progressbar__bar": !0,
+      [`pkt-progressbar__bar--${this.skin}`]: !!this.skin
+    }), p = n({
+      "pkt-progressbar__title": !0,
+      "pkt-progressbar__title-center": this.titlePosition === "center"
+    }), f = n({
+      "pkt-progressbar__status": !0,
+      "pkt-progressbar__status--center": this.statusPlacement === "center"
+    }), m = n({
+      "pkt-progressbar__status-placement--following": this.statusPlacement === "following",
+      "pkt-progressbar__status-placement--center": this.statusPlacement === "center",
+      "pkt-progressbar__status-placement--left": this.statusPlacement === "left"
+    });
+    return b` <div
+      class="pkt-progressbar__container"
+      .ref=${this.progressBarRef}
+      style=${M({
+      "--pkt-progress-label-width": `${this.labelWidth}px`,
+      "--pkt-progress-width": `${s}%`
+    })}
+    >
+      ${this.title ? b`<p id=${`${this.progressBarId}-title`} class=${p}>${this.title}</p>` : c}
+
+      <div class="pkt-progressbar__bar-wrapper">
+        <div class=${o}></div>
+      </div>
+
+      ${t ? b`<div class=${f}>
+            <span class=${m} ${k(this.labelRef)}>
+              ${this.statusType === "percentage" ? `${s}%` : l}
+            </span>
+          </div>` : c}
+    </div>`;
+  }
+  // methods
+  setComputedValues() {
+    this.progressbarId = this.id || d(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`, this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || "";
+  }
+  syncAttributes() {
+    this._handleAttribute("aria-live", this.ariaLive), this._handleAttribute("aria-valuenow", this.valueCurrent), this._handleAttribute("aria-valuemin", this.valueMin), this._handleAttribute("aria-valuemax", this.valueMax), this._handleAttribute("aria-valuetext", this.computedAriaValueText), this._handleAttribute("aria-label", this.ariaLabel), this._handleAttribute("role", this.role), this._handleAttribute("aria-atomic", "true"), this._handleAttribute("id", this.progressbarId), this.ariaLabel || this._handleAttribute("aria-labelledby", this.computedAriaLabelledby);
+  }
+  _handleAttribute(t, e) {
+    e == null || e === "" ? this.removeAttribute(t) : this.setAttribute(t, String(e));
+  }
+};
+i([
+  u({ type: String })
+], r.prototype, "ariaLabel", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "ariaLabelledby", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "ariaValueText", 2);
+i([
+  u({ type: String })
+], r.prototype, "ariaLive", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "id", 2);
+i([
+  u({ type: String })
+], r.prototype, "role", 2);
+i([
+  u({ type: String })
+], r.prototype, "skin", 2);
+i([
+  u({ type: String })
+], r.prototype, "statusPlacement", 2);
+i([
+  u({ type: String })
+], r.prototype, "statusType", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "title", 2);
+i([
+  u({ type: String })
+], r.prototype, "titlePosition", 2);
+i([
+  u({ type: Number, reflect: !0 })
+], r.prototype, "valueCurrent", 2);
+i([
+  u({ type: Number })
+], r.prototype, "valueMax", 2);
+i([
+  u({ type: Number })
+], r.prototype, "valueMin", 2);
+i([
+  h()
+], r.prototype, "labelWidth", 2);
+i([
+  h()
+], r.prototype, "progressbarId", 2);
+i([
+  h()
+], r.prototype, "computedAriaLabelledby", 2);
+i([
+  h()
+], r.prototype, "computedAriaValueText", 2);
+r = i([
+  T("pkt-progressbar")
+], r);
+const O = r;
+export {
+  r as P,
+  O as a
+};

package/dist/{select-Djqz3LXr.js → select-ACWsh3Q4.js}

@@ -3,7 +3,7 @@ import { r as f } from "./state-BfyXV7EL.js";
 import { e as d, n as u } from "./ref-DuFGTLVX.js";
 import { o as r } from "./if-defined-ZFE4ti2t.js";
 import { P as $ } from "./input-element--t-9j6bw.js";
-import "./input-wrapper-CvH9cWvH.js";
+import "./input-wrapper-CWD6Lvr-.js";
 class v {
   constructor(t) {
     this.nodes = [], this.options = [], this.host = t, this.host.addController(this), this.nodes = [], this.options = [], this.observer = new MutationObserver((e) => this.handleMutations(e));

package/dist/{select-Bz4TH4OJ.cjs → select-CFdjp5Sk.cjs}

@@ -1,4 +1,4 @@
-"use strict";const l=require("./icon-CdMQ6zBT.cjs"),d=require("./state-SKYD8kRO.cjs"),a=require("./ref-DCOsLZQg.cjs"),o=require("./if-defined-DEDlGbAc.cjs"),u=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-BKTwBjxo.cjs");class c{constructor(t){this.nodes=[],this.options=[],this.host=t,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(s=>this.handleMutations(s))}hostConnected(){Array.from(this.host.childNodes).forEach(t=>{(t.nodeName==="OPTION"||t.nodeName==="DATA")&&this.addNode(t)}),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}addNode(t){(t.nodeName==="OPTION"||t.nodeName==="DATA")&&(t.setAttribute("class","pkt-hide"),this.nodes.push(t))}createOptions(){this.options=this.nodes.map(t=>({value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||"",selected:!!t.getAttribute("selected"),disabled:!!t.getAttribute("disabled")})),this.host.setAttribute("options",JSON.stringify(this.options))}handleMutations(t){let s=!1;t.forEach(e=>{e.addedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.addNode(i),s=!0)}),e.removedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.nodes=this.nodes.filter(r=>r!==i),s=!0)})}),s&&this.createOptions()}}var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,h=(n,t,s,e)=>{for(var i=e>1?void 0:e?f(t,s):t,r=n.length-1,p;r>=0;r--)(p=n[r])&&(i=(e?p(t,s,i):p(i))||i);return e&&i&&b(t,s,i),i};exports.PktSelect=class extends u.PktInputElement{constructor(){super(),this.selectRef=a.e(),this.defaultSlot=a.e(),this.options=[],this.value="",this._options=[],this.optionsController=new c(this)}connectedCallback(){super.connectedCallback();const t=this.options.length>0,s=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&s?this.optionsController.nodes.forEach(e=>{if(!e.textContent&&!e.getAttribute("value"))return null;const i={value:e.getAttribute("value")||e.textContent||"",label:e.textContent||e.getAttribute("value")||"",disabled:!!e.getAttribute("disabled")};e.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):this._options=this.options}attributeChangedCallback(t,s,e){t==="options"&&(this._options=e?JSON.parse(e):[]),super.attributeChangedCallback(t,s,e)}firstUpdated(t){super.firstUpdated(t),this.options.length&&(this._options=this.options)}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return l.x`
+"use strict";const l=require("./icon-CdMQ6zBT.cjs"),d=require("./state-SKYD8kRO.cjs"),a=require("./ref-DCOsLZQg.cjs"),o=require("./if-defined-DEDlGbAc.cjs"),u=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-DraeSNb6.cjs");class c{constructor(t){this.nodes=[],this.options=[],this.host=t,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(s=>this.handleMutations(s))}hostConnected(){Array.from(this.host.childNodes).forEach(t=>{(t.nodeName==="OPTION"||t.nodeName==="DATA")&&this.addNode(t)}),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}addNode(t){(t.nodeName==="OPTION"||t.nodeName==="DATA")&&(t.setAttribute("class","pkt-hide"),this.nodes.push(t))}createOptions(){this.options=this.nodes.map(t=>({value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||"",selected:!!t.getAttribute("selected"),disabled:!!t.getAttribute("disabled")})),this.host.setAttribute("options",JSON.stringify(this.options))}handleMutations(t){let s=!1;t.forEach(e=>{e.addedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.addNode(i),s=!0)}),e.removedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.nodes=this.nodes.filter(r=>r!==i),s=!0)})}),s&&this.createOptions()}}var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,h=(n,t,s,e)=>{for(var i=e>1?void 0:e?f(t,s):t,r=n.length-1,p;r>=0;r--)(p=n[r])&&(i=(e?p(t,s,i):p(i))||i);return e&&i&&b(t,s,i),i};exports.PktSelect=class extends u.PktInputElement{constructor(){super(),this.selectRef=a.e(),this.defaultSlot=a.e(),this.options=[],this.value="",this._options=[],this.optionsController=new c(this)}connectedCallback(){super.connectedCallback();const t=this.options.length>0,s=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&s?this.optionsController.nodes.forEach(e=>{if(!e.textContent&&!e.getAttribute("value"))return null;const i={value:e.getAttribute("value")||e.textContent||"",label:e.textContent||e.getAttribute("value")||"",disabled:!!e.getAttribute("disabled")};e.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):this._options=this.options}attributeChangedCallback(t,s,e){t==="options"&&(this._options=e?JSON.parse(e):[]),super.attributeChangedCallback(t,s,e)}firstUpdated(t){super.firstUpdated(t),this.options.length&&(this._options=this.options)}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return l.x`
       <pkt-input-wrapper
         ?counter=${this.counter}
         ?disabled=${this.disabled}

package/dist/{textarea-CRHf9Jri.js → textarea-8VOlYKdT.js}

@@ -3,7 +3,7 @@ import { r as f } from "./state-BfyXV7EL.js";
 import { f as b, m as v, e as x, n as T } from "./ref-DuFGTLVX.js";
 import { e as y } from "./class-map-hz16xq5a.js";
 import { P as w } from "./input-element--t-9j6bw.js";
-import "./input-wrapper-CvH9cWvH.js";
+import "./input-wrapper-CWD6Lvr-.js";
 /**
  * @license
  * Copyright 2020 Google LLC

package/dist/{textarea-CJauH-oJ.cjs → textarea-DPTHMOSZ.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),p=require("./class-map-Boa7BqCc.cjs"),d=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-BKTwBjxo.cjs");/**
+"use strict";const r=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),p=require("./class-map-Boa7BqCc.cjs"),d=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-DraeSNb6.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{textinput-D46zLo13.js → textinput-D2uB8zkQ.js}

@@ -3,7 +3,7 @@ import { r as d } from "./state-BfyXV7EL.js";
 import { e as $, n as g } from "./ref-DuFGTLVX.js";
 import { e as m } from "./class-map-hz16xq5a.js";
 import { P as f } from "./input-element--t-9j6bw.js";
-import "./input-wrapper-CvH9cWvH.js";
+import "./input-wrapper-CWD6Lvr-.js";
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, e, r, t) => {
   for (var p = t > 1 ? void 0 : t ? y(e, r) : e, u = i.length - 1, l; u >= 0; u--)
     (l = i[u]) && (p = (t ? l(e, r, p) : l(p)) || p);

package/dist/{textinput-CDvSlCLl.cjs → textinput-OmztIgoC.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),l=require("./class-map-Boa7BqCc.cjs"),c=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-BKTwBjxo.cjs");var d=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?x(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(...arguments),this.value="",this.type="text",this.size=null,this.autocomplete="off",this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.inputRef=o.e()}attributeChangedCallback(i,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,n=l.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),l=require("./class-map-Boa7BqCc.cjs"),c=require("./input-element-BxMdqhqV.cjs");require("./input-wrapper-DraeSNb6.cjs");var d=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?x(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(...arguments),this.value="",this.type="text",this.size=null,this.autocomplete="off",this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.inputRef=o.e()}attributeChangedCallback(i,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,n=l.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.18.11",
+  "version": "12.18.13",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8a210e2160405aeef55732bc90c860fa2d0f66bb"
+  "gitHead": "7d476ef635a1efa5cf9dc6991a75e823aa8caf06"
 }

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

@@ -179,6 +179,7 @@ export class PktInputWrapper extends PktElement {
     const errorElement = () => {
       if (this.hasError && this.errorMessage) {
         return html`<div
+          role="alert"
           class="pkt-alert pkt-alert--error pkt-alert--compact"
           aria-live="assertive"
           aria-atomic="true"

package/src/components/progressbar/progressbar.ts

@@ -1,13 +1,13 @@
-import { ifDefined } from 'lit/directives/if-defined.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { html } from 'lit'
+import { html, nothing } from 'lit'
 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 '@/utils/stringutils'
 
 import '@/components/icon'
+import { TAriaLive } from '@/types/aria'
 
 export type TProgressbarRole = 'progressbar' | 'meter'
 export type TProgressbarSkin = 'dark-blue' | 'light-blue' | 'green' | 'red'
@@ -16,76 +16,101 @@ export type TProgressbarStatusType = 'none' | 'percentage' | 'fraction'
 export type TProgressbarTitlePosition = 'left' | 'center'
 
 export interface IPktProgressbar {
+  ariaLabel?: string | null
+  ariaLabelledby?: string | null
+  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
-  ariaValueText?: string
-  skin?: TProgressbarSkin
-  title?: string
-  titlePosition?: TProgressbarTitlePosition
-  statusType?: TProgressbarStatusType
-  statusPlacement?: TProgressbarStatusPlacement
-  ariaLabel?: string
-  ariaLabelledby?: string
-  role?: TProgressbarRole
 }
 
 @customElement('pkt-progressbar')
 export class PktProgressbar extends PktElement implements IPktProgressbar {
+  constructor() {
+    super()
+  }
   // Public properties
-  @property({ type: Number, reflect: true }) valueCurrent: number = 0
-  @property({ type: Number, reflect: true }) valueMax: number = 100
-  @property({ type: Number, reflect: true }) valueMin: number = 0
-  @property({ type: String, reflect: true }) skin: TProgressbarSkin = 'dark-blue'
-  @property({ type: String, reflect: true }) title: string = ''
-  @property({ type: String, reflect: true }) titlePosition: TProgressbarTitlePosition = 'left'
-  @property({ type: String, reflect: true }) statusType: TProgressbarStatusType = 'none'
-  @property({ type: String, reflect: true }) statusPlacement: TProgressbarStatusPlacement =
-    'following'
-  @property({ type: String, reflect: true }) ariaLabel: string = ''
-  @property({ type: String, reflect: true }) ariaLabelledby: string = ''
-  @property({ type: String, reflect: true }) ariaValueText: string = ''
-  @property({ type: String, reflect: true }) role: TProgressbarRole = 'progressbar'
+  @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, 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, 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
 
   // State
-  @state() private labelWidth: number = 0
-  @state() private progressBarId: string = this.id
+  @state() private labelWidth = 0
+  @state() private progressbarId: string = this.id
+  @state() private computedAriaLabelledby: string | null = null
+  @state() private computedAriaValueText = ''
 
-  // Private properties
+  // Private refs
   private labelRef: Ref<HTMLSpanElement> = createRef()
   private progressBarRef: Ref<HTMLDivElement> = createRef()
 
   firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(changedProperties)
-    if (!this.id) {
-      this.progressBarId = uuidish()
-    } else {
-      this.progressBarId = this.id
-    }
+    this.setComputedValues()
+    this.syncAttributes()
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(changedProperties)
+
     if (changedProperties.has('valueCurrent') && this.labelRef.value) {
       this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0
     }
     if (changedProperties.has('id') && this.id) {
       this.progressBarId = this.id
     }
+
+    if (
+      changedProperties.has('statusType') ||
+      changedProperties.has('id') ||
+      changedProperties.has('ariaLabelledby')
+    ) {
+      this.progressbarId = this.id || uuidish()
+      this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`
+    }
+    if (
+      changedProperties.has('ariaValueText') ||
+      changedProperties.has('valueCurrent') ||
+      changedProperties.has('valueMax')
+    ) {
+      this.computedAriaValueText =
+        this.statusType === 'fraction' && !this.ariaValueText
+          ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+          : this.ariaValueText || ''
+    }
+
+    this.syncAttributes()
   }
 
   render() {
+    const hasStatus = this.statusType !== 'none'
     const totalSteps = this.valueMax - this.valueMin
     const percentageOfSteps = (this.valueCurrent / totalSteps) * 100
     const currentPercentage =
-      this.valueMax !== 100 || this.valueMin !== 0
+      this.statusType === 'fraction'
         ? Math.round(percentageOfSteps)
-        : this.valueCurrent
-    const formattedTitle = `${this.valueCurrent} av ${this.valueMax}`
-    const hasStatus = this.statusType !== 'none'
+        : Math.round(((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin)) * 100)
 
-    const ariaLabelledbyText =
-      this.ariaLabelledby || (this.progressBarId && `${this.progressBarId}-title`)
+    const formattedTitle = `${this.valueCurrent} av ${totalSteps}`
 
     const barClasses = classMap({
       'pkt-progressbar__bar': true,
@@ -106,7 +131,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
     })
 
     return html` <div
-      id=${this.progressBarId}
       class="pkt-progressbar__container"
       .ref=${this.progressBarRef}
       style=${styleMap({
@@ -114,31 +138,56 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
         '--pkt-progress-width': `${currentPercentage}%`,
       })}
     >
-      ${this.title &&
-      html`<p id=${`${this.progressBarId}-title`} class=${titleClasses}>${this.title}</p>`}
-
-      <div
-        .id=${this.progressBarId}
-        role=${this.role as any}
-        class="pkt-progressbar__bar-wrapper"
-        aria-valuemin=${this.valueMin}
-        aria-valuemax=${this.valueMax}
-        aria-valuenow=${this.valueCurrent}
-        aria-labelledby=${ifDefined(ariaLabelledbyText)}
-        aria-label=${ifDefined(this.ariaLabel)}
-        aria-valuetext=${ifDefined(this.ariaValueText)}
-      >
+      ${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>`}
+      ${hasStatus
+        ? html`<div class=${statusClasses}>
+            <span class=${placementClasses} ${ref(this.labelRef)}>
+              ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
+            </span>
+          </div>`
+        : nothing}
     </div>`
   }
+
+  // methods
+  private setComputedValues() {
+    this.progressbarId = this.id || uuidish()
+    this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`
+    this.computedAriaValueText =
+      this.statusType === 'fraction' && !this.ariaValueText
+        ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+        : this.ariaValueText || ''
+  }
+
+  private syncAttributes() {
+    this._handleAttribute('aria-live', this.ariaLive)
+    this._handleAttribute('aria-valuenow', this.valueCurrent)
+    this._handleAttribute('aria-valuemin', this.valueMin)
+    this._handleAttribute('aria-valuemax', this.valueMax)
+    this._handleAttribute('aria-valuetext', this.computedAriaValueText)
+    this._handleAttribute('aria-label', this.ariaLabel)
+    this._handleAttribute('role', this.role)
+    this._handleAttribute('aria-atomic', 'true')
+    this._handleAttribute('id', this.progressbarId)
+    if (!this.ariaLabel) {
+      this._handleAttribute('aria-labelledby', this.computedAriaLabelledby)
+    }
+  }
+
+  private _handleAttribute(name: string, value: string | number | null) {
+    if (value == null || value === '') {
+      this.removeAttribute(name)
+    } else {
+      this.setAttribute(name, String(value))
+    }
+  }
 }
 
 export default PktProgressbar

package/dist/progressbar-BS_oawSB.js

@@ -1,150 +0,0 @@
-import { o as h } from "./if-defined-ZFE4ti2t.js";
-import { e as u } from "./class-map-hz16xq5a.js";
-import { e as m, i as $, b as _, T as P, P as k, x as c, n as o, t as x } from "./icon-wUXeHiBk.js";
-import { r as b } from "./state-BfyXV7EL.js";
-import { e as d, n as w } from "./ref-DuFGTLVX.js";
-import { u as B } from "./stringutils-DJjRa8dG.js";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const f = "important", C = " !" + f, T = m(class extends $ {
-  constructor(e) {
-    var s;
-    if (super(e), e.type !== _.ATTRIBUTE || e.name !== "style" || ((s = e.strings) == null ? void 0 : s.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
-  }
-  render(e) {
-    return Object.keys(e).reduce((s, r) => {
-      const t = e[r];
-      return t == null ? s : s + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${t};`;
-    }, "");
-  }
-  update(e, [s]) {
-    const { style: r } = e.element;
-    if (this.ft === void 0) return this.ft = new Set(Object.keys(s)), this.render(s);
-    for (const t of this.ft) s[t] == null && (this.ft.delete(t), t.includes("-") ? r.removeProperty(t) : r[t] = null);
-    for (const t in s) {
-      const i = s[t];
-      if (i != null) {
-        this.ft.add(t);
-        const p = typeof i == "string" && i.endsWith(C);
-        t.includes("-") || p ? r.setProperty(t, p ? i.slice(0, -11) : i, p ? f : "") : r[t] = i;
-      }
-    }
-    return P;
-  }
-});
-var M = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, s, r, t) => {
-  for (var i = t > 1 ? void 0 : t ? S(s, r) : s, p = e.length - 1, n; p >= 0; p--)
-    (n = e[p]) && (i = (t ? n(s, r, i) : n(i)) || i);
-  return t && i && M(s, r, i), i;
-};
-let a = class extends k {
-  constructor() {
-    super(...arguments), this.valueCurrent = 0, this.valueMax = 100, this.valueMin = 0, this.skin = "dark-blue", this.title = "", this.titlePosition = "left", this.statusType = "none", this.statusPlacement = "following", this.ariaLabel = "", this.ariaLabelledby = "", this.ariaValueText = "", this.role = "progressbar", this.labelWidth = 0, this.progressBarId = this.id, this.labelRef = d(), this.progressBarRef = d();
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.id ? this.progressBarId = this.id : this.progressBarId = B();
-  }
-  updated(e) {
-    super.updated(e), e.has("valueCurrent") && this.labelRef.value && (this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0), e.has("id") && this.id && (this.progressBarId = this.id);
-  }
-  render() {
-    const e = this.valueMax - this.valueMin, s = this.valueCurrent / e * 100, r = this.valueMax !== 100 || this.valueMin !== 0 ? Math.round(s) : this.valueCurrent, t = `${this.valueCurrent} av ${this.valueMax}`, i = this.statusType !== "none", p = this.ariaLabelledby || this.progressBarId && `${this.progressBarId}-title`, n = u({
-      "pkt-progressbar__bar": !0,
-      [`pkt-progressbar__bar--${this.skin}`]: !!this.skin
-    }), g = u({
-      "pkt-progressbar__title": !0,
-      "pkt-progressbar__title-center": this.titlePosition === "center"
-    }), y = u({
-      "pkt-progressbar__status": !0,
-      "pkt-progressbar__status--center": this.statusPlacement === "center"
-    }), v = u({
-      "pkt-progressbar__status-placement--following": this.statusPlacement === "following",
-      "pkt-progressbar__status-placement--center": this.statusPlacement === "center",
-      "pkt-progressbar__status-placement--left": this.statusPlacement === "left"
-    });
-    return c` <div
-      id=${this.progressBarId}
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${T({
-      "--pkt-progress-label-width": `${this.labelWidth}px`,
-      "--pkt-progress-width": `${r}%`
-    })}
-    >
-      ${this.title && c`<p id=${`${this.progressBarId}-title`} class=${g}>${this.title}</p>`}
-
-      <div
-        .id=${this.progressBarId}
-        role=${this.role}
-        class="pkt-progressbar__bar-wrapper"
-        aria-valuemin=${this.valueMin}
-        aria-valuemax=${this.valueMax}
-        aria-valuenow=${this.valueCurrent}
-        aria-labelledby=${h(p)}
-        aria-label=${h(this.ariaLabel)}
-        aria-valuetext=${h(this.ariaValueText)}
-      >
-        <div class=${n}></div>
-      </div>
-
-      ${i && c`<div class=${y}>
-        <span class=${v} ${w(this.labelRef)}>
-          ${this.statusType === "percentage" ? `${r}%` : t}
-        </span>
-      </div>`}
-    </div>`;
-  }
-};
-l([
-  o({ type: Number, reflect: !0 })
-], a.prototype, "valueCurrent", 2);
-l([
-  o({ type: Number, reflect: !0 })
-], a.prototype, "valueMax", 2);
-l([
-  o({ type: Number, reflect: !0 })
-], a.prototype, "valueMin", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "skin", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "title", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "titlePosition", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "statusType", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "statusPlacement", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "ariaLabel", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "ariaLabelledby", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "ariaValueText", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "role", 2);
-l([
-  b()
-], a.prototype, "labelWidth", 2);
-l([
-  b()
-], a.prototype, "progressBarId", 2);
-a = l([
-  x("pkt-progressbar")
-], a);
-const E = a;
-export {
-  a as P,
-  E as a
-};

package/dist/progressbar-CuXkbAhJ.cjs

@@ -1,32 +0,0 @@
-"use strict";const u=require("./if-defined-DEDlGbAc.cjs"),p=require("./class-map-Boa7BqCc.cjs"),r=require("./icon-CdMQ6zBT.cjs"),c=require("./state-SKYD8kRO.cjs"),h=require("./ref-DCOsLZQg.cjs"),y=require("./stringutils-CkVRq4jP.cjs");/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const b="important",v=" !"+b,k=r.e(class extends r.i{constructor(l){var t;if(super(l),l.type!==r.t$1.ATTRIBUTE||l.name!=="style"||((t=l.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(l){return Object.keys(l).reduce((t,s)=>{const e=l[s];return e==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}update(l,[t]){const{style:s}=l.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)t[e]==null&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const a=t[e];if(a!=null){this.ft.add(e);const o=typeof a=="string"&&a.endsWith(v);e.includes("-")||o?s.setProperty(e,o?a.slice(0,-11):a,o?b:""):s[e]=a}}return r.T}});var $=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(l,t,s,e)=>{for(var a=e>1?void 0:e?_(t,s):t,o=l.length-1,n;o>=0;o--)(n=l[o])&&(a=(e?n(t,s,a):n(a))||a);return e&&a&&$(t,s,a),a};exports.PktProgressbar=class extends r.PktElement{constructor(){super(...arguments),this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.skin="dark-blue",this.title="",this.titlePosition="left",this.statusType="none",this.statusPlacement="following",this.ariaLabel="",this.ariaLabelledby="",this.ariaValueText="",this.role="progressbar",this.labelWidth=0,this.progressBarId=this.id,this.labelRef=h.e(),this.progressBarRef=h.e()}firstUpdated(t){super.firstUpdated(t),this.id?this.progressBarId=this.id:this.progressBarId=y.uuidish()}updated(t){super.updated(t),t.has("valueCurrent")&&this.labelRef.value&&(this.labelWidth=this.labelRef.value.getBoundingClientRect().width||0),t.has("id")&&this.id&&(this.progressBarId=this.id)}render(){const t=this.valueMax-this.valueMin,s=this.valueCurrent/t*100,e=this.valueMax!==100||this.valueMin!==0?Math.round(s):this.valueCurrent,a=`${this.valueCurrent} av ${this.valueMax}`,o=this.statusType!=="none",n=this.ariaLabelledby||this.progressBarId&&`${this.progressBarId}-title`,g=p.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),d=p.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),P=p.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),f=p.e({"pkt-progressbar__status-placement--following":this.statusPlacement==="following","pkt-progressbar__status-placement--center":this.statusPlacement==="center","pkt-progressbar__status-placement--left":this.statusPlacement==="left"});return r.x` <div
-      id=${this.progressBarId}
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${k({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${e}%`})}
-    >
-      ${this.title&&r.x`<p id=${`${this.progressBarId}-title`} class=${d}>${this.title}</p>`}
-
-      <div
-        .id=${this.progressBarId}
-        role=${this.role}
-        class="pkt-progressbar__bar-wrapper"
-        aria-valuemin=${this.valueMin}
-        aria-valuemax=${this.valueMax}
-        aria-valuenow=${this.valueCurrent}
-        aria-labelledby=${u.o(n)}
-        aria-label=${u.o(this.ariaLabel)}
-        aria-valuetext=${u.o(this.ariaValueText)}
-      >
-        <div class=${g}></div>
-      </div>
-
-      ${o&&r.x`<div class=${P}>
-        <span class=${f} ${h.n(this.labelRef)}>
-          ${this.statusType==="percentage"?`${e}%`:a}
-        </span>
-      </div>`}
-    </div>`}};i([r.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueCurrent",2);i([r.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueMax",2);i([r.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueMin",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"skin",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"title",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"titlePosition",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"statusType",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"statusPlacement",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabel",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabelledby",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaValueText",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"role",2);i([c.r()],exports.PktProgressbar.prototype,"labelWidth",2);i([c.r()],exports.PktProgressbar.prototype,"progressBarId",2);exports.PktProgressbar=i([r.t("pkt-progressbar")],exports.PktProgressbar);const m=exports.PktProgressbar;exports.PktProgressbar$1=m;