@oslokommune/punkt-elements 12.31.0 → 12.31.2

package/dist/{card-BWslf2mu.cjs → card-C63x_nll.cjs}

@@ -1,4 +1,4 @@
-"use strict";const g=require("./class-map-Dj5mbCUg.cjs"),d=require("./if-defined-CpIkv1A4.cjs"),t=require("./element-CzFXQBoS.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs"),l=require("./ref-2anvRHT4.cjs");require("./icon-BOKusjAA.cjs");require("./tag-D6ARkq2Z.cjs");const u="pkt-card",h=!0,m={heading:{type:"string",name:"Heading",description:"Tittel på kortet"},subheading:{type:"string",name:"Subheading",description:"Undertittel på kortet"},skin:{type:["outlined","gray","blue","beige","green"],name:"Skin",description:"Farge på kortet",default:"outlined"},direction:{type:["landscape","portrait"],name:"Direction",description:"Retningen innholdet skal ligge i forhold til kortet",default:"portrait"},tags:{type:"array",description:"Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",name:"Tags",items:{type:"object",properties:{skin:{type:["blue","green","red","yellow"],description:"Farge på tag"},iconName:{type:"icon",description:"Id på ikonet du ønsker å bruke til tag"},ariaLabel:{type:"string",description:"Tekst for aria-label"},text:{type:"string",description:"Tekst på tag",required:!0}}}},image:{type:"object",name:"Bilde",description:"Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",properties:{src:{type:"string",description:"Bilde på kortet",required:!0},alt:{type:"string",description:"Tekst for aria-label",required:!0}}}},y={default:{description:"Innholdet i kortet"}},c={name:u,"css-class":"pkt-card",isElement:h,props:m,slots:y};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,s,e,n)=>{for(var r=n>1?void 0:n?b(s,e):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(n?p(s,e,r):p(r))||r);return n&&r&&f(s,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=c.props.skin.default,this.direction=c.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new k.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const s={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
+"use strict";const g=require("./class-map-Dj5mbCUg.cjs"),d=require("./if-defined-CpIkv1A4.cjs"),t=require("./element-CzFXQBoS.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs"),l=require("./ref-2anvRHT4.cjs");require("./icon-BOKusjAA.cjs");require("./tag-BeLSOjNh.cjs");const u="pkt-card",h=!0,m={heading:{type:"string",name:"Heading",description:"Tittel på kortet"},subheading:{type:"string",name:"Subheading",description:"Undertittel på kortet"},skin:{type:["outlined","gray","blue","beige","green"],name:"Skin",description:"Farge på kortet",default:"outlined"},direction:{type:["landscape","portrait"],name:"Direction",description:"Retningen innholdet skal ligge i forhold til kortet",default:"portrait"},tags:{type:"array",description:"Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",name:"Tags",items:{type:"object",properties:{skin:{type:["blue","green","red","yellow"],description:"Farge på tag"},iconName:{type:"icon",description:"Id på ikonet du ønsker å bruke til tag"},ariaLabel:{type:"string",description:"Tekst for aria-label"},text:{type:"string",description:"Tekst på tag",required:!0}}}},image:{type:"object",name:"Bilde",description:"Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",properties:{src:{type:"string",description:"Bilde på kortet",required:!0},alt:{type:"string",description:"Tekst for aria-label",required:!0}}}},y={default:{description:"Innholdet i kortet"}},c={name:u,"css-class":"pkt-card",isElement:h,props:m,slots:y};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,s,e,n)=>{for(var r=n>1?void 0:n?b(s,e):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(n?p(s,e,r):p(r))||r);return n&&r&&f(s,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=c.props.skin.default,this.direction=c.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new k.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const s={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
       <div class=${g.e(s)}>
         ${this.image.src&&t.x`
           <div class="pkt-card__image">

package/dist/{card-B0uNyDCw.js → card-DQfNKnKl.js}

@@ -4,7 +4,7 @@ import { P as m, x as r, E as k, n as a, a as u } from "./element-C7XjZtLU.js";
 import { P as y } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as f, n as b } from "./ref-DbOSDQbk.js";
 import "./icon-BEUgV9Wo.js";
-import "./tag-CHtPXyP5.js";
+import "./tag-CmFcSdOV.js";
 const $ = "pkt-card", v = !0, _ = {
   heading: {
     type: "string",

package/dist/{datepicker-CQZ84VOS.js → datepicker-CYUvRGhE.js}

@@ -8,7 +8,7 @@ import { p as H, v as $, r as R, M as I, m as N, e as w, n as y } from "./ref-Db
 import { e as U, i as K, t as W } from "./directive-B76A7YXI.js";
 import "./icon-BEUgV9Wo.js";
 import "./input-wrapper-DaZZq8c0.js";
-import "./tag-CHtPXyP5.js";
+import "./tag-CmFcSdOV.js";
 import { P as z } from "./pkt-slot-controller-Clbye6cM.js";
 /**
  * @license

package/dist/{datepicker-BczZqaup.cjs → datepicker-FuAL0uNU.cjs}

@@ -1,4 +1,4 @@
-"use strict";const $=require("./class-map-Dj5mbCUg.cjs"),k=require("./if-defined-CpIkv1A4.cjs"),n=require("./element-CzFXQBoS.cjs"),S=require("./state-HNj0_316.cjs"),g=require("./calendar-CxBo98iI.cjs"),P=require("./input-element-Dtyuf6s8.cjs"),r=require("./ref-2anvRHT4.cjs"),w=require("./directive-C_VV3qwo.cjs");require("./icon-BOKusjAA.cjs");require("./input-wrapper-Bo2_t6pA.cjs");require("./tag-D6ARkq2Z.cjs");const I=require("./pkt-slot-controller-Oc32unDk.cjs");/**
+"use strict";const $=require("./class-map-Dj5mbCUg.cjs"),k=require("./if-defined-CpIkv1A4.cjs"),n=require("./element-CzFXQBoS.cjs"),S=require("./state-HNj0_316.cjs"),g=require("./calendar-CxBo98iI.cjs"),P=require("./input-element-Dtyuf6s8.cjs"),r=require("./ref-2anvRHT4.cjs"),w=require("./directive-C_VV3qwo.cjs");require("./icon-BOKusjAA.cjs");require("./input-wrapper-Bo2_t6pA.cjs");require("./tag-BeLSOjNh.cjs");const I=require("./pkt-slot-controller-Oc32unDk.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/index.d.ts

@@ -14,6 +14,55 @@ import { TZDate } from '@date-fns/tz';
  */
 declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;
 
+declare interface IAriaAttributes {
+    'aria-activedescendant'?: string;
+    'aria-controls'?: string;
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-errormessage'?: string;
+    'aria-flowto'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-owns'?: string;
+    'aria-roledescription'?: string;
+    'aria-autocomplete'?: TAriaAutoComplete;
+    'aria-checked'?: TAriaBooleanMixed;
+    'aria-current'?: TAriaCurrent;
+    'aria-disabled'?: TAriaBoolean;
+    'aria-expanded'?: TAriaBoolean;
+    'aria-haspopup'?: TAriaHasPopup;
+    'aria-hidden'?: TAriaBoolean;
+    'aria-invalid'?: TAriaInvalid;
+    'aria-keyshortcuts'?: string;
+    'aria-level'?: number;
+    'aria-modal'?: TAriaBoolean;
+    'aria-multiline'?: TAriaBoolean;
+    'aria-multiselectable'?: TAriaBoolean;
+    'aria-orientation'?: TAriaOrientation;
+    'aria-placeholder'?: string;
+    'aria-pressed'?: TAriaBooleanMixed;
+    'aria-readonly'?: TAriaBoolean;
+    'aria-required'?: TAriaBoolean;
+    'aria-selected'?: TAriaBoolean;
+    'aria-sort'?: TAriaSort;
+    'aria-atomic'?: TAriaBoolean;
+    'aria-busy'?: TAriaBoolean;
+    'aria-live'?: TAriaLive;
+    'aria-relevant'?: TAriaRelevant | string;
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-posinset'?: number;
+    'aria-setsize'?: number;
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+}
+
 declare interface IPktAlert {
     skin?: TAlertSkin;
     closeAlert?: boolean;
@@ -125,10 +174,10 @@ declare interface IPktTag {
     closeTag?: boolean;
     size?: TPktSize;
     skin?: TTagSkin;
-    textStyle?: string;
-    iconName?: string;
+    textStyle?: string | null;
+    iconName?: PktIconName;
     type?: TTagType;
-    ariaLabel?: string;
+    ariaLabel?: IAriaAttributes['aria-label'] | null;
 }
 
 export declare class PktAlert extends PktElement implements IPktAlert {
@@ -706,7 +755,7 @@ declare class PktSlotController implements ReactiveController {
     private handleMutations;
 }
 
-export declare class PktTag extends PktElement {
+export declare class PktTag extends PktElement implements IPktTag {
     slotController: PktSlotController;
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -719,11 +768,16 @@ export declare class PktTag extends PktElement {
     textStyle: string | null;
     iconName: string | undefined;
     type: TTagType;
-    ariaLabel: string;
+    ariaLabel: string | null;
     /**
      * Element state
      */
     _isClosed: boolean;
+    _ariaDescription: string | null;
+    /**
+     * Lifecycle
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     /**
      * Element functions
      */
@@ -774,8 +828,38 @@ declare type Props_5 = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'a
 
 declare type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
 
+declare type TAriaAutoComplete = 'none' | 'inline' | 'list' | 'both';
+
+/**
+ * aria.ts
+ *
+ * Typedefinisjoner for ARIA-attributter og roller.
+ * Eksportert slik at de kan importere andre steder:
+ *
+ *   import type {
+ *     TAriaAttributes,
+ *     TAriaLive,
+ *     // ...
+ *   } from './aria-types';
+ */
+declare type TAriaBoolean = boolean | 'true' | 'false';
+
+declare type TAriaBooleanMixed = TAriaBoolean | 'mixed';
+
+declare type TAriaCurrent = TAriaBoolean | 'page' | 'step' | 'location' | 'date' | 'time';
+
+declare type TAriaHasPopup = TAriaBoolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+
+declare type TAriaInvalid = TAriaBoolean | 'grammar' | 'spelling';
+
 declare type TAriaLive = 'off' | 'polite' | 'assertive';
 
+declare type TAriaOrientation = 'horizontal' | 'vertical';
+
+declare type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';
+
+declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
+
 declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 
 declare type TDirection = 'portrait' | 'landscape';

package/dist/pkt-card.cjs

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

package/dist/pkt-card.js

@@ -1,4 +1,4 @@
-import { P as a } from "./card-B0uNyDCw.js";
+import { P as a } from "./card-DQfNKnKl.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-datepicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-BczZqaup.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-FuAL0uNU.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-CQZ84VOS.js";
+import { P as t } from "./datepicker-CYUvRGhE.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 k=require("./alert-BDxxRqgi.cjs"),d=require("./backlink-Dn4DfWVR.cjs"),P=require("./button-Beo3c7cx.cjs"),c=require("./calendar-CxBo98iI.cjs"),b=require("./card-BWslf2mu.cjs"),m=require("./checkbox-9Zjy_NU7.cjs"),t=require("./element-CzFXQBoS.cjs"),g=require("./pkt-slot-controller-Oc32unDk.cjs"),s=require("./ref-2anvRHT4.cjs"),h=require("./class-map-Dj5mbCUg.cjs"),f=require("./datepicker-BczZqaup.cjs"),y=require("./helptext-B9kxDc2b.cjs"),O=require("./icon-BOKusjAA.cjs"),j=require("./input-wrapper-Bo2_t6pA.cjs"),q=require("./link-1iq0Pmuf.cjs"),x=require("./linkcard-2WzDJPZz.cjs"),C=require("./loader-DI74pe25.cjs"),v=require("./messagebox-DQpEMkS2.cjs"),S=require("./modal-ytIJwfr3.cjs"),$=require("./progressbar-B6A9UVXS.cjs"),p=require("./radiobutton-BWyQgR_x.cjs"),L=require("./tag-D6ARkq2Z.cjs"),_=require("./textarea-VG-UTMLP.cjs"),B=require("./textinput-CEP7QA3E.cjs"),T=require("./select-DZL6aa2s.cjs");var M=Object.defineProperty,R=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?R(e,r):e,u=a.length-1,l;u>=0;u--)(l=a[u])&&(n=(i?l(e,r,n):l(n))||n);return i&&n&&M(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new g.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 k=require("./alert-BDxxRqgi.cjs"),d=require("./backlink-Dn4DfWVR.cjs"),P=require("./button-Beo3c7cx.cjs"),c=require("./calendar-CxBo98iI.cjs"),b=require("./card-C63x_nll.cjs"),m=require("./checkbox-9Zjy_NU7.cjs"),t=require("./element-CzFXQBoS.cjs"),g=require("./pkt-slot-controller-Oc32unDk.cjs"),s=require("./ref-2anvRHT4.cjs"),h=require("./class-map-Dj5mbCUg.cjs"),f=require("./datepicker-FuAL0uNU.cjs"),y=require("./helptext-B9kxDc2b.cjs"),O=require("./icon-BOKusjAA.cjs"),j=require("./input-wrapper-Bo2_t6pA.cjs"),q=require("./link-1iq0Pmuf.cjs"),x=require("./linkcard-2WzDJPZz.cjs"),C=require("./loader-DI74pe25.cjs"),v=require("./messagebox-DQpEMkS2.cjs"),S=require("./modal-ytIJwfr3.cjs"),$=require("./progressbar-B6A9UVXS.cjs"),p=require("./radiobutton-BWyQgR_x.cjs"),L=require("./tag-BeLSOjNh.cjs"),_=require("./textarea-VG-UTMLP.cjs"),B=require("./textinput-CEP7QA3E.cjs"),T=require("./select-DZL6aa2s.cjs");var M=Object.defineProperty,R=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?R(e,r):e,u=a.length-1,l;u>=0;u--)(l=a[u])&&(n=(i?l(e,r,n):l(n))||n);return i&&n&&M(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new g.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="${h.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -3,13 +3,13 @@ import { P as E } from "./backlink-CzpB-ih9.js";
 import { P as R } from "./button-9NwGr-OS.js";
 import { c as d } from "./calendar-BbZNxsKY.js";
 import { P as j } from "./calendar-BbZNxsKY.js";
-import { P as D } from "./card-B0uNyDCw.js";
+import { P as D } from "./card-DQfNKnKl.js";
 import { P as G } from "./checkbox-CzDpR6_8.js";
 import { P as f, x as P, t as k, n, a as c } from "./element-C7XjZtLU.js";
 import { P as x } from "./pkt-slot-controller-Clbye6cM.js";
 import { e as m, n as h } from "./ref-DbOSDQbk.js";
 import { e as u } from "./class-map-DWtqmIRS.js";
-import { P as M } from "./datepicker-CQZ84VOS.js";
+import { P as M } from "./datepicker-CYUvRGhE.js";
 import { P as N } from "./helptext-CqnoPodd.js";
 import { P as W } from "./icon-BEUgV9Wo.js";
 import { P as z } from "./input-wrapper-DaZZq8c0.js";
@@ -20,7 +20,7 @@ import { P as tt } from "./messagebox-KP-8-tA9.js";
 import { P as rt } from "./modal-kPX8nO_L.js";
 import { P as st } from "./progressbar-D0nxLqHu.js";
 import { P as nt, P as it } from "./radiobutton-DLWjvLBO.js";
-import { P as lt } from "./tag-CHtPXyP5.js";
+import { P as lt } from "./tag-CmFcSdOV.js";
 import { P as mt } from "./textarea-BPqWCymU.js";
 import { P as dt } from "./textinput-VD74aGzx.js";
 import { P as kt } from "./select-CzuxXKll.js";

package/dist/pkt-tag.cjs

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

package/dist/pkt-tag.js

@@ -1,4 +1,4 @@
-import { P as a } from "./tag-CHtPXyP5.js";
+import { P as a } from "./tag-CmFcSdOV.js";
 const o = a;
 export {
   a as PktTag,

package/dist/tag-BeLSOjNh.cjs

@@ -0,0 +1,18 @@
+"use strict";const u=require("./class-map-Dj5mbCUg.cjs"),t=require("./element-CzFXQBoS.cjs"),g=require("./state-HNj0_316.cjs"),d=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-2anvRHT4.cjs");require("./icon-BOKusjAA.cjs");const h=require("./if-defined-CpIkv1A4.cjs"),k="pkt-tag",f=!0,y={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"icon",required:!1},skin:{required:!1,default:"blue",type:["blue","blue-light","blue-dark","green","red","beige","yellow","gray"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1}},b={default:{description:"Teksten til tag"}},l={name:k,"css-class":"pkt-tag",isElement:f,props:y,slots:b};var m=Object.defineProperty,T=Object.getOwnPropertyDescriptor,i=(o,e,a,r)=>{for(var s=r>1?void 0:r?T(e,a):e,n=o.length-1,p;n>=0;n--)(p=o[n])&&(s=(r?p(e,a,s):p(s))||s);return r&&s&&m(e,a,s),s};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=l.props.closeTag.default,this.size=l.props.size.default,this.skin=l.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=l.props.type.default,this.ariaLabel=null,this._isClosed=!1,this._ariaDescription=null,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new d.PktSlotController(this,this.defaultSlot),this._isClosed=!1}firstUpdated(e){var a,r;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const s=(r=(a=this.defaultSlot.value)==null?void 0:a.textContent)==null?void 0:r.trim();s&&(this._ariaDescription=`Klikk for å fjerne ${s}`)}}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
+        <button
+          class=${u.e(a)}
+          type=${this.type}
+          @click=${this.close}
+          aria-label=${h.o(this.ariaLabel||void 0)}
+          aria-description=${h.o(this._ariaDescription||void 0)}
+        >
+          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${c.n(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `:t.x`
+        <span class=${u.e(e)}>
+          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${c.n(this.defaultSlot)}></span>
+        </span>
+      `}};i([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);i([t.n({type:String})],exports.PktTag.prototype,"type",2);i([t.n({type:String})],exports.PktTag.prototype,"ariaLabel",2);i([g.r()],exports.PktTag.prototype,"_isClosed",2);i([g.r()],exports.PktTag.prototype,"_ariaDescription",2);exports.PktTag=i([t.t("pkt-tag")],exports.PktTag);

package/dist/{tag-CHtPXyP5.js → tag-CmFcSdOV.js}

@@ -1,10 +1,11 @@
 import { e as h } from "./class-map-DWtqmIRS.js";
-import { P as d, x as p, n as a, a as m } from "./element-C7XjZtLU.js";
-import { r as y } from "./state-CDQk0DFQ.js";
-import { P as g } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as k, n as f } from "./ref-DbOSDQbk.js";
+import { P as y, x as p, n as r, a as g } from "./element-C7XjZtLU.js";
+import { r as m } from "./state-CDQk0DFQ.js";
+import { P as k } from "./pkt-slot-controller-Clbye6cM.js";
+import { e as b, n as f } from "./ref-DbOSDQbk.js";
 import "./icon-BEUgV9Wo.js";
-const b = "pkt-tag", $ = !0, S = {
+import { o as d } from "./if-defined-eRX4e5zO.js";
+const _ = "pkt-tag", $ = !0, S = {
   closeTag: {
     type: "boolean",
     required: !1,
@@ -56,34 +57,43 @@ const b = "pkt-tag", $ = !0, S = {
   },
   ariaLabel: {
     type: "string",
-    required: !1,
-    default: "Lukk"
+    required: !1
   }
-}, _ = {
+}, x = {
   default: {
     description: "Teksten til tag"
   }
-}, l = {
-  name: b,
+}, n = {
+  name: _,
   "css-class": "pkt-tag",
   isElement: $,
   props: S,
-  slots: _
+  slots: x
 };
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
-  for (var i = r > 1 ? void 0 : r ? C(o, n) : o, c = s.length - 1, u; c >= 0; c--)
-    (u = s[c]) && (i = (r ? u(o, n, i) : u(i)) || i);
-  return r && i && x(o, n, i), i;
+var v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, i, l, o) => {
+  for (var a = o > 1 ? void 0 : o ? C(i, l) : i, c = s.length - 1, u; c >= 0; c--)
+    (u = s[c]) && (a = (o ? u(i, l, a) : u(a)) || a);
+  return o && a && v(i, l, a), a;
 };
-let t = class extends d {
+let t = class extends y {
   constructor() {
-    super(), this.defaultSlot = k(), this.closeTag = l.props.closeTag.default, this.size = l.props.size.default, this.skin = l.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = l.props.type.default, this.ariaLabel = l.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
+    super(), this.defaultSlot = b(), this.closeTag = n.props.closeTag.default, this.size = n.props.size.default, this.skin = n.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = n.props.type.default, this.ariaLabel = null, this._isClosed = !1, this._ariaDescription = null, this.close = (s) => {
       this._isClosed = !0, this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
       ), this.dispatchEvent(
         new CustomEvent("on-close", { detail: { origin: s }, bubbles: !0, composed: !0 })
       );
-    }, this.slotController = new g(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
+  }
+  /**
+   * Lifecycle
+   */
+  firstUpdated(s) {
+    var i, l;
+    if (super.firstUpdated(s), this.closeTag && !this.ariaLabel) {
+      const o = (l = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : l.trim();
+      o && (this._ariaDescription = `Klikk for å fjerne ${o}`);
+    }
   }
   render() {
     const s = {
@@ -91,7 +101,7 @@ let t = class extends d {
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle
-    }, o = {
+    }, i = {
       "pkt-tag": !0,
       "pkt-btn": !0,
       "pkt-btn--tertiary": !0,
@@ -103,10 +113,11 @@ let t = class extends d {
     };
     return this.closeTag ? p`
         <button
-          class=${h(o)}
+          class=${h(i)}
           type=${this.type}
-          aria-label=${this.ariaLabel}
           @click=${this.close}
+          aria-label=${d(this.ariaLabel || void 0)}
+          aria-description=${d(this._ariaDescription || void 0)}
         >
           ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
           <span ${f(this.defaultSlot)}></span>
@@ -121,31 +132,34 @@ let t = class extends d {
   }
 };
 e([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], t.prototype, "closeTag", 2);
 e([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "size", 2);
 e([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "skin", 2);
 e([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "textStyle", 2);
 e([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "iconName", 2);
 e([
-  a({ type: String })
+  r({ type: String })
 ], t.prototype, "type", 2);
 e([
-  a({ type: String })
+  r({ type: String })
 ], t.prototype, "ariaLabel", 2);
 e([
-  y()
+  m()
 ], t.prototype, "_isClosed", 2);
+e([
+  m()
+], t.prototype, "_ariaDescription", 2);
 t = e([
-  m("pkt-tag")
+  g("pkt-tag")
 ], t);
 export {
   t as P

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.31.0",
+  "version": "12.31.2",
   "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": "95a46dc5e5fcbab72e2c303c26127a95297c3e83"
+  "gitHead": "bb030d6ba98fa9e45a95cf3092d95b46a750a730"
 }

package/src/components/tag/tag.ts

@@ -1,6 +1,6 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { html } from 'lit'
+import { html, PropertyValues } from 'lit'
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref } from 'lit/directives/ref.js'
@@ -9,6 +9,9 @@ import { TPktSize } from '@/types/size'
 import specs from 'componentSpecs/tag.json'
 
 import '@/components/icon'
+import { IAriaAttributes } from '@/types/aria'
+import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 export type TTagSkin =
   | 'blue'
@@ -26,14 +29,14 @@ export interface IPktTag {
   closeTag?: boolean
   size?: TPktSize
   skin?: TTagSkin
-  textStyle?: string
-  iconName?: string
+  textStyle?: string | null
+  iconName?: PktIconName
   type?: TTagType
-  ariaLabel?: string
+  ariaLabel?: IAriaAttributes['aria-label'] | null
 }
 
 @customElement('pkt-tag')
-export class PktTag extends PktElement {
+export class PktTag extends PktElement implements IPktTag {
   slotController: PktSlotController
   defaultSlot: Ref<HTMLElement> = createRef()
 
@@ -52,12 +55,28 @@ export class PktTag extends PktElement {
   @property({ type: String, reflect: true }) textStyle: string | null = null
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String }) type: TTagType = specs.props.type.default as TTagType
-  @property({ type: String }) ariaLabel: string = specs.props.ariaLabel.default
+  @property({ type: String }) ariaLabel: string | null = null
 
   /**
    * Element state
    */
   @state() _isClosed: boolean = false
+  @state() _ariaDescription: string | null = null
+
+  /**
+   * Lifecycle
+   */
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties)
+
+    if (this.closeTag && !this.ariaLabel) {
+      const label = this.defaultSlot.value?.textContent?.trim()
+      if (label) {
+        this._ariaDescription = `Klikk for å fjerne ${label}`
+      }
+    }
+  }
 
   /**
    * Element functions
@@ -97,8 +116,9 @@ export class PktTag extends PktElement {
         <button
           class=${classMap(btnClasses)}
           type=${this.type}
-          aria-label=${this.ariaLabel}
           @click=${this.close}
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
+          aria-description=${ifDefined(this._ariaDescription || undefined)}
         >
           ${this.iconName &&
           html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}

package/dist/tag-D6ARkq2Z.cjs

@@ -1,17 +0,0 @@
-"use strict";const u=require("./class-map-Dj5mbCUg.cjs"),t=require("./element-CzFXQBoS.cjs"),h=require("./state-HNj0_316.cjs"),g=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-2anvRHT4.cjs");require("./icon-BOKusjAA.cjs");const k="pkt-tag",d=!0,f={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"icon",required:!1},skin:{required:!1,default:"blue",type:["blue","blue-light","blue-dark","green","red","beige","yellow","gray"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"Lukk"}},y={default:{description:"Teksten til tag"}},l={name:k,"css-class":"pkt-tag",isElement:d,props:f,slots:y};var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(o,e,a,r)=>{for(var i=r>1?void 0:r?m(e,a):e,n=o.length-1,p;n>=0;n--)(p=o[n])&&(i=(r?p(e,a,i):p(i))||i);return r&&i&&b(e,a,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=l.props.closeTag.default,this.size=l.props.size.default,this.skin=l.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=l.props.type.default,this.ariaLabel=l.props.ariaLabel.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new g.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
-        <button
-          class=${u.e(a)}
-          type=${this.type}
-          aria-label=${this.ariaLabel}
-          @click=${this.close}
-        >
-          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-          <span ${c.n(this.defaultSlot)}></span>
-          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-        </button>
-      `:t.x`
-        <span class=${u.e(e)}>
-          ${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-          <span ${c.n(this.defaultSlot)}></span>
-        </span>
-      `}};s([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);s([t.n({type:String})],exports.PktTag.prototype,"type",2);s([t.n({type:String})],exports.PktTag.prototype,"ariaLabel",2);s([h.r()],exports.PktTag.prototype,"_isClosed",2);exports.PktTag=s([t.t("pkt-tag")],exports.PktTag);