@oslokommune/punkt-elements 12.40.2 → 12.40.3

package/CHANGELOG.md

@@ -5,6 +5,27 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.40.3](https://github.com/oslokommune/punkt/compare/12.40.2...12.40.3) (2025-05-20)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* update propnames for cards (#2574). - direction til layout
+  - portrait til vertical
+  - landscape til horizontal
+  - padding: standard til padding: default
+
+
+---
+
+
 ## [12.40.1](https://github.com/oslokommune/punkt/compare/12.40.0...12.40.1) (2025-05-20)
 
 ### ⚠ BREAKING CHANGES

package/dist/{card-6kFXx2cg.cjs → card-CibYYPmF.cjs}

@@ -1,7 +1,7 @@
-"use strict";const p=require("./class-map-DCyaICmy.cjs"),l=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),g=require("./pkt-slot-controller-Da-RgXfS.cjs"),c=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={direction:{default:"portrait"},skin:{default:"outlined"},padding:{default:"standard"}},h={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(d,a,r,s)=>{for(var i=s>1?void 0:s?m(a,r):a,n=d.length-1,o;n>=0;n--)(o=d[n])&&(i=(s?o(a,r,i):o(i))||i);return s&&i&&u(a,r,i),i};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.direction=h.props.direction.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=h.props.padding.default,this.skin=h.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var i,n;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},r=((i=this.ariaLabel)==null?void 0:i.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),s=((n=this.ariaLabel)==null?void 0:n.trim())||(this.heading?this.heading:"kort");return t.x`
+"use strict";const l=require("./class-map-DCyaICmy.cjs"),p=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),g=require("./pkt-slot-controller-Da-RgXfS.cjs"),c=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={layout:{default:"vertical"},skin:{default:"outlined"},padding:{default:"default"}},h={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(d,a,i,s)=>{for(var r=s>1?void 0:s?m(a,i):a,n=d.length-1,o;n>=0;n--)(o=d[n])&&(r=(s?o(a,i,r):o(r))||r);return s&&r&&u(a,i,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=h.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=h.props.padding.default,this.skin=h.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,n;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),s=((n=this.ariaLabel)==null?void 0:n.trim())||(this.heading?this.heading:"kort");return t.x`
       <article
-        class=${p.e(a)}
-        aria-label=${l.o(this.clickCardLink?r:s)}
+        class=${l.e(a)}
+        aria-label=${p.o(this.clickCardLink?i:s)}
       >
         ${this.renderImage()}
         <div class="pkt-card__wrapper">
@@ -14,7 +14,7 @@
       </article>
     `}renderImage(){const a={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return t.x`
       ${this.image.src&&t.x`
-        <div class=${p.e(a)}>
+        <div class=${l.e(a)}>
           <img src=${this.image.src} alt=${this.image.alt||""} />
         </div>
       `}
@@ -58,19 +58,19 @@
     `}renderTags(){const a={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return t.x`
       ${this.tags.length>0?t.x`
             <div
-              class=${p.e(a)}
+              class=${l.e(a)}
               role="list"
               aria-label=${this.tags.length>1?"merkelapper":"merkelapp"}
             >
-              ${this.tags.map(r=>t.x`
+              ${this.tags.map(i=>t.x`
                   <pkt-tag
                     role="listitem"
                     textStyle="normal-text"
                     size="medium"
-                    skin=${l.o(r.skin)}
-                    iconName=${l.o(r.iconName)}
+                    skin=${p.o(i.skin)}
+                    iconName=${p.o(i.iconName)}
                   >
-                    ${r.text}
+                    ${i.text}
                   </pkt-tag>
                 `)}
             </div>
@@ -84,4 +84,4 @@
               ${this.metaTrail?t.x`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:t.E}
             </footer>
           `:t.E}
-    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"metaLead",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"borderOnHover",2);e([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"clickCardLink",2);e([t.n({type:String})],exports.PktCard.prototype,"metaTrail",2);e([t.n({type:String})],exports.PktCard.prototype,"direction",2);e([t.n({type:String})],exports.PktCard.prototype,"heading",2);e([t.n({type:Number})],exports.PktCard.prototype,"headinglevel",2);e([t.n({type:Object})],exports.PktCard.prototype,"image",2);e([t.n({type:String})],exports.PktCard.prototype,"imageShape",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"openLinkInNewTab",2);e([t.n({type:String})],exports.PktCard.prototype,"padding",2);e([t.n({type:String})],exports.PktCard.prototype,"skin",2);e([t.n({type:String})],exports.PktCard.prototype,"subheading",2);e([t.n({type:String})],exports.PktCard.prototype,"tagPosition",2);e([t.n({type:Array})],exports.PktCard.prototype,"tags",2);exports.PktCard=e([t.t("pkt-card")],exports.PktCard);
+    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"metaLead",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"borderOnHover",2);e([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"clickCardLink",2);e([t.n({type:String})],exports.PktCard.prototype,"metaTrail",2);e([t.n({type:String})],exports.PktCard.prototype,"layout",2);e([t.n({type:String})],exports.PktCard.prototype,"heading",2);e([t.n({type:Number})],exports.PktCard.prototype,"headinglevel",2);e([t.n({type:Object})],exports.PktCard.prototype,"image",2);e([t.n({type:String})],exports.PktCard.prototype,"imageShape",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"openLinkInNewTab",2);e([t.n({type:String})],exports.PktCard.prototype,"padding",2);e([t.n({type:String})],exports.PktCard.prototype,"skin",2);e([t.n({type:String})],exports.PktCard.prototype,"subheading",2);e([t.n({type:String})],exports.PktCard.prototype,"tagPosition",2);e([t.n({type:Array})],exports.PktCard.prototype,"tags",2);exports.PktCard=e([t.t("pkt-card")],exports.PktCard);

package/dist/{card-BN_kkFp5.js → card-Vy3_XLAy.js}

@@ -1,35 +1,35 @@
 import { e as g } from "./class-map-KyMqi0fa.js";
 import { o as c } from "./if-defined-BErSJCeJ.js";
-import { P as m, E as d, x as t, n as i, a as $ } from "./element-DjjF_tEh.js";
-import { P as u } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as _, n as y } from "./ref-iIffqQAI.js";
+import { P as m, E as d, x as t, n as i, a as u } from "./element-DjjF_tEh.js";
+import { P as $ } from "./pkt-slot-controller-DtDaD9q_.js";
+import { e as y, n as _ } from "./ref-iIffqQAI.js";
 import "./icon-Beoxup8E.js";
 import "./tag-Cu8afZy8.js";
 const b = {
-  direction: {
-    default: "portrait"
+  layout: {
+    default: "vertical"
   },
   skin: {
     default: "outlined"
   },
   padding: {
-    default: "standard"
+    default: "default"
   }
 }, k = {
   props: b
 };
 var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (r, s, p, o) => {
-  for (var n = o > 1 ? void 0 : o ? S(s, p) : s, h = r.length - 1, l; h >= 0; h--)
-    (l = r[h]) && (n = (o ? l(s, p, n) : l(n)) || n);
+  for (var n = o > 1 ? void 0 : o ? S(s, p) : s, l = r.length - 1, h; l >= 0; l--)
+    (h = r[l]) && (n = (o ? h(s, p, n) : h(n)) || n);
   return o && n && f(s, p, n), n;
 };
 let e = class extends m {
   //Constructor
   constructor() {
-    super(), this.defaultSlot = _(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.direction = k.props.direction.default, this.heading = "", this.headinglevel = 3, this.image = {
+    super(), this.defaultSlot = y(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = k.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
       src: "",
       alt: ""
-    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = k.props.padding.default, this.skin = k.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new u(this, this.defaultSlot);
+    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = k.props.padding.default, this.skin = k.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new $(this, this.defaultSlot);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -42,7 +42,7 @@ let e = class extends m {
     const r = {
       "pkt-card": !0,
       [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--${this.layout}`]: this.layout,
       [`pkt-card--padding-${this.padding}`]: this.padding,
       "pkt-card--border-on-hover": this.borderOnHover
     }, s = ((o = this.ariaLabel) == null ? void 0 : o.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), p = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
@@ -161,7 +161,7 @@ let e = class extends m {
   }
   renderSlot() {
     return t`
-      ${this.defaultSlot && t`<section class="pkt-card__content" ${y(this.defaultSlot)}></section>`}
+      ${this.defaultSlot && t`<section class="pkt-card__content" ${_(this.defaultSlot)}></section>`}
     `;
   }
   renderMetadata() {
@@ -192,7 +192,7 @@ a([
 ], e.prototype, "metaTrail", 2);
 a([
   i({ type: String })
-], e.prototype, "direction", 2);
+], e.prototype, "layout", 2);
 a([
   i({ type: String })
 ], e.prototype, "heading", 2);
@@ -224,7 +224,7 @@ a([
   i({ type: Array })
 ], e.prototype, "tags", 2);
 e = a([
-  $("pkt-card")
+  u("pkt-card")
 ], e);
 export {
   e as P

package/dist/index.d.ts

@@ -122,7 +122,7 @@ declare interface IPktCard {
     ariaLabel?: IAriaAttributes['aria-label'];
     metaLead?: string | null;
     metaTrail?: string | null;
-    direction?: TDirection;
+    layout?: TLayout;
     heading?: string;
     headingLevel?: IPktHeading['level'];
     image?: {
@@ -467,7 +467,7 @@ export declare class PktCard extends PktElement implements IPktCard {
     borderOnHover: boolean;
     clickCardLink: IPktCard['clickCardLink'];
     metaTrail: string | null;
-    direction: TDirection;
+    layout: TLayout;
     heading: string;
     headinglevel: IPktHeading['level'];
     image: {
@@ -1179,7 +1179,7 @@ declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
 
 declare type TCardImageShape = 'square' | 'round';
 
-declare type TCardPadding = 'none' | 'standard';
+declare type TCardPadding = 'none' | 'default';
 
 declare type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
 
@@ -1187,7 +1187,7 @@ declare type TCardTagPosition = 'top' | 'bottom';
 
 declare type TCounterPosition = 'top' | 'bottom';
 
-declare type TDirection = 'portrait' | 'landscape';
+declare type TLayout = 'vertical' | 'horizontal';
 
 declare type TLinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
 

package/dist/pkt-card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-6kFXx2cg.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-CibYYPmF.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-BN_kkFp5.js";
+import { P as a } from "./card-Vy3_XLAy.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-C60j8BsA.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-6kFXx2cg.cjs"),g=require("./combobox-dwkB9Yv_.cjs"),h=require("./consent-1ZSUrWK9.cjs"),f=require("./checkbox-7ct89AUo.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-BDnncwne.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-ndMy12Pb.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-C8GbUY8p.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-DGWTMdAZ.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-yUzqcBYY.cjs"),M=require("./textinput-8mT0npMY.cjs"),R=require("./select-ChpPtH7u.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(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 y.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 P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-C60j8BsA.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-CibYYPmF.cjs"),g=require("./combobox-dwkB9Yv_.cjs"),h=require("./consent-1ZSUrWK9.cjs"),f=require("./checkbox-7ct89AUo.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-BDnncwne.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-nesPZCIx.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-ndMy12Pb.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-C8GbUY8p.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-DGWTMdAZ.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-yUzqcBYY.cjs"),M=require("./textinput-8mT0npMY.cjs"),R=require("./select-ChpPtH7u.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(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 y.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="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -4,7 +4,7 @@ import { P as O } from "./backlink-hvyJmwrO.js";
 import { P as T } from "./button-BCCtR9ff.js";
 import { c as f } from "./calendar-KDcOWD6V.js";
 import { P as D } from "./calendar-KDcOWD6V.js";
-import { P as G } from "./card-BN_kkFp5.js";
+import { P as G } from "./card-Vy3_XLAy.js";
 import { P as K } from "./combobox-DewmPXyJ.js";
 import { P as U } from "./consent-c6eWVBWx.js";
 import { P as q } from "./checkbox-D5fSFvhs.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.40.2",
+  "version": "12.40.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.39.2",
-    "@oslokommune/punkt-css": "^12.40.2",
+    "@oslokommune/punkt-css": "^12.40.3",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8abfa8016c57bbaebf21fe645687d35b1ee3c8f5"
+  "gitHead": "ed16d8e18201f36c905e47b96d62d29278595ba8"
 }

package/src/components/card/card.ts

@@ -13,8 +13,8 @@ import '@/components/tag'
 import { IAriaAttributes } from '@/types/aria'
 
 export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
-export type TDirection = 'portrait' | 'landscape'
-export type TCardPadding = 'none' | 'standard'
+export type TLayout = 'vertical' | 'horizontal'
+export type TCardPadding = 'none' | 'default'
 export type TCardImageShape = 'square' | 'round'
 export type TCardTagPosition = 'top' | 'bottom'
 
@@ -22,7 +22,7 @@ export interface IPktCard {
   ariaLabel?: IAriaAttributes['aria-label']
   metaLead?: string | null
   metaTrail?: string | null
-  direction?: TDirection
+  layout?: TLayout
   heading?: string
   headingLevel?: IPktHeading['level']
   image?: { src: string; alt: string }
@@ -57,7 +57,7 @@ export class PktCard extends PktElement implements IPktCard {
   @property({ type: Boolean }) borderOnHover: boolean = true
   @property({ type: String, reflect: true }) clickCardLink: IPktCard['clickCardLink'] = null
   @property({ type: String }) metaTrail: string | null = null
-  @property({ type: String }) direction: TDirection = specs.props.direction.default as TDirection
+  @property({ type: String }) layout: TLayout = specs.props.layout.default as TLayout
   @property({ type: String }) heading: string = ''
   @property({ type: Number }) headinglevel: IPktHeading['level'] = 3
   @property({ type: Object }) image: { src: string; alt: string } = {
@@ -84,7 +84,7 @@ export class PktCard extends PktElement implements IPktCard {
     const classes = {
       'pkt-card': true,
       [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--${this.layout}`]: this.layout,
       [`pkt-card--padding-${this.padding}`]: this.padding,
       [`pkt-card--border-on-hover`]: this.borderOnHover,
      

package/src/components/card/index.ts

@@ -1,4 +1,4 @@
 import { PktCard } from './card'
-import type { TCardSkin, TDirection } from './card'
-export { PktCard, TCardSkin, TDirection }
+import type { TCardSkin, TLayout, TCardPadding, TCardImageShape, TCardTagPosition } from './card'
+export { PktCard, TCardSkin, TLayout, TCardPadding, TCardImageShape, TCardTagPosition }
 export default PktCard