@proximus/lavender-poke-card 1.4.7-beta.2

package/dist/CardActions.d.ts

@@ -0,0 +1,11 @@
+import '@proximus/lavender-layout';
+/**
+ * @summary Row of action buttons + optional overflow icon inside a PokeCard.
+ *
+ * @slot - Primary action button(s) rendered on the left.
+ * @slot more-action - Overflow / "more" action rendered on the right.
+ */
+export declare class CardActions extends HTMLElement {
+    private template;
+    constructor();
+}

package/dist/CardContainer.d.ts

@@ -0,0 +1,65 @@
+import '@proximus/lavender-container';
+import '@proximus/lavender-layout';
+import { type Container } from '@proximus/lavender-container';
+import { type Stack } from '@proximus/lavender-layout';
+export declare const cardContainerMediaPositionValues: readonly ["none", "top", "left"];
+export type CardContainerMediaPosition = (typeof cardContainerMediaPositionValues)[number];
+export declare const cardContainerMediaSizeValues: readonly ["cover", "contain"];
+export type CardContainerMediaSize = (typeof cardContainerMediaSizeValues)[number];
+export declare const cardContainerBackgroundColorValues: readonly ["container-primary", "container-secondary", "container-light", "container-default", "container-strong"];
+export type CardContainerBackgroundColor = (typeof cardContainerBackgroundColorValues)[number];
+/**
+ * @summary Outer card surface with media support. Delegates background, border and inverted handling to `<px-container>`.
+ *
+ * @slot heading - Card heading group (`<px-card-heading>`). Rendered at the top of the content area.
+ * @slot - Default slot for body content between the heading and actions.
+ * @slot actions - Card actions group (`<px-card-actions>`). Rendered at the bottom of the content area.
+ *
+ * @attr {boolean} inverted - Switches to a dark surface with inverted text colors.
+ * @attr {string} src - URL of the card media image.
+ * @attr {'none'|'top'|'left'} media-position - Where the media image is rendered.
+ * @attr {'cover'|'contain'} media-size - How the media image is fitted.
+ * @attr {string} alternative-text - Alt text for the media image.
+ * @attr {'s'|'m'|'l'} padding - Inner content padding size.
+ * @attr {string} aspect-ratio - Aspect ratio applied to top media (e.g. `'16:9'`, `'1:1'`, `'4:3'`).
+ * @attr {'true'|'false'} has-border - Whether the card has a visible border.
+ * @attr {'container-primary'|'container-secondary'|'container-light'|'container-default'|'container-strong'} background-color - Surface color preset.
+ * @attr {string} background-image - URL of a full-card background image (delegated to `<px-container>`).
+ *
+ * @cssproperty --card-padding - Resolved inner content padding (driven by `padding`).
+ */
+export declare class CardContainer extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    private template;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    get $container(): Container;
+    get $cardInner(): Stack;
+    get $mediaWrapper(): HTMLElement;
+    get $mediaImage(): HTMLImageElement;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get src(): string;
+    set src(value: string);
+    get mediaPosition(): CardContainerMediaPosition;
+    set mediaPosition(value: CardContainerMediaPosition);
+    get mediaSize(): CardContainerMediaSize;
+    set mediaSize(value: CardContainerMediaSize);
+    get mediaAltText(): string;
+    set mediaAltText(value: string);
+    get padding(): string;
+    set padding(value: string);
+    get aspectRatio(): string;
+    set aspectRatio(value: string);
+    get hasBorder(): boolean;
+    set hasBorder(value: boolean);
+    get backgroundColor(): CardContainerBackgroundColor | null;
+    set backgroundColor(value: CardContainerBackgroundColor);
+    get backgroundImage(): string;
+    set backgroundImage(value: string);
+    get interactiveState(): string;
+    set interactiveState(value: string);
+}

package/dist/CardHeading.d.ts

@@ -0,0 +1,10 @@
+import '@proximus/lavender-layout';
+/**
+ * @summary Title + subtitle heading group inside a PokeCard.
+ *
+ * @slot - Card title and subtitle elements (e.g. `<px-h3>`, `<px-p>`), stacked vertically with a tight gap.
+ */
+export declare class CardHeading extends HTMLElement {
+    private template;
+    constructor();
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CardContainer';
+export * from './CardHeading';
+export * from './CardActions';

package/dist/index.es.js

@@ -0,0 +1,278 @@
+var b = (r) => {
+  throw TypeError(r);
+};
+var y = (r, a, t) => a.has(r) || b("Cannot " + t);
+var g = (r, a, t) => a.has(r) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t);
+var i = (r, a, t) => (y(r, a, "access private method"), t);
+import "@proximus/lavender-container";
+import "@proximus/lavender-layout";
+import { cssTokenBreakpoints as $, paddingValues as w } from "@proximus/lavender-common";
+const C = ':host{--card-padding: var(--px-padding-s-mobile);display:block;border:var(--px-size-border-m) solid rgba(0,0,0,0)}:host[has-border]{border:var(--px-size-border-s) solid rgba(0,0,0,0)}:host *{box-sizing:border-box}:host([interactive-state="hover"]:hover){border:0 solid rgba(0,0,0,0)}.media-wrapper{display:none;position:relative;overflow:hidden}:host([media-position="top"]) .media-wrapper{display:block;width:100%}:host([media-position="top"]) .media-wrapper img{border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}:host([media-position="left"]) .media-wrapper{display:block;width:33.33%;aspect-ratio:1 / 1;flex-shrink:0}:host([media-position="left"]) .media-wrapper img{border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}.media-image{display:block;width:100%;height:100%;object-fit:cover}.media-image:not([src]){display:none}:host([media-size="contain"]) .media-image{object-fit:contain}.content{display:block;padding:var(--card-padding);flex:1 1 auto}', k = new CSSStyleSheet();
+k.replaceSync(C);
+const j = [
+  "none",
+  "top",
+  "left"
+], W = ["cover", "contain"], D = [
+  "container-primary",
+  "container-secondary",
+  "container-light",
+  "container-default",
+  "container-strong"
+], R = (r, a, t) => `:host([${r}${t ? `--${t}` : ""}='${a}']) .content`, z = $(
+  "padding",
+  R,
+  w,
+  "px-padding"
+);
+var e, v, A, d, c, h, l, p, u, x, o;
+class I extends HTMLElement {
+  constructor() {
+    super();
+    g(this, e);
+    this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [k, z], this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      "inverted",
+      "src",
+      "media-position",
+      "media-size",
+      "media-alt-text",
+      "padding",
+      "aspect-ratio",
+      "has-border",
+      "background-color",
+      "background-image",
+      "interactive-state"
+    ];
+  }
+  template() {
+    return `
+      <px-container
+        padding="none"
+        border-radius="main"
+        background-color="container-default"
+      >
+        <px-stack class="card-inner" direction="column" gap="none" align-items="stretch">
+          <div class="media-wrapper">
+            <img class="media-image" alt="" />
+          </div>
+          <px-vstack class="content" gap="s">
+            <slot name="heading"></slot>
+            <slot></slot>
+            <slot name="actions"></slot>
+          </px-vstack>
+        </px-stack>
+      </px-container>
+    `;
+  }
+  connectedCallback() {
+    this.hasAttribute("media-position") || this.setAttribute("media-position", "none"), this.hasAttribute("padding") || this.setAttribute("padding", "s"), this.hasAttribute("media-size") || this.setAttribute("media-size", "cover"), i(this, e, d).call(this), i(this, e, c).call(this);
+  }
+  disconnectedCallback() {
+  }
+  attributeChangedCallback(t, s, n) {
+    var m;
+    if (s !== n)
+      switch (t) {
+        case "src":
+          i(this, e, v).call(this, this.$mediaImage, n);
+          break;
+        case "media-position":
+          (m = this.$cardInner) == null || m.setAttribute(
+            "direction",
+            n === "left" ? "row" : "column"
+          );
+          break;
+        case "media-alt-text":
+          n ? (this.$mediaImage.setAttribute("alt", n), this.$mediaImage.removeAttribute("aria-hidden")) : (this.$mediaImage.setAttribute("alt", ""), this.$mediaImage.setAttribute("aria-hidden", "true"));
+          break;
+        case "aspect-ratio":
+          i(this, e, A).call(this, n);
+          break;
+        case "background-image":
+          n ? (this.$container.setAttribute("background-image", n), this.$container.setAttribute("background-size", "cover")) : (this.$container.removeAttribute("background-image"), this.$container.removeAttribute("background-size"));
+          break;
+        case "background-color":
+          i(this, e, d).call(this);
+          break;
+        case "has-border":
+          i(this, e, c).call(this);
+          break;
+        case "interactive-state":
+          i(this, e, p).call(this);
+          break;
+        case "inverted":
+          n !== null ? this.$container.setAttribute("inverted", "") : this.$container.removeAttribute("inverted"), i(this, e, x).call(this), i(this, e, d).call(this);
+          break;
+      }
+  }
+  /* ─── Refs ───────────────────────────────────────────────── */
+  get $container() {
+    return this.shadowRoot.querySelector("px-container");
+  }
+  get $cardInner() {
+    return this.shadowRoot.querySelector(".card-inner");
+  }
+  get $mediaWrapper() {
+    return this.shadowRoot.querySelector(".media-wrapper");
+  }
+  get $mediaImage() {
+    return this.shadowRoot.querySelector(".media-image");
+  }
+  /* ─── Reflected props ────────────────────────────────────── */
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    this.toggleAttribute("inverted", !!t);
+  }
+  get src() {
+    return this.getAttribute("src");
+  }
+  set src(t) {
+    i(this, e, o).call(this, "src", t);
+  }
+  get mediaPosition() {
+    return this.getAttribute("media-position") || "none";
+  }
+  set mediaPosition(t) {
+    i(this, e, o).call(this, "media-position", t);
+  }
+  get mediaSize() {
+    return this.getAttribute("media-size") || "cover";
+  }
+  set mediaSize(t) {
+    i(this, e, o).call(this, "media-size", t);
+  }
+  get mediaAltText() {
+    return this.getAttribute("media-alt-text");
+  }
+  set mediaAltText(t) {
+    i(this, e, o).call(this, "media-alt-text", t);
+  }
+  get padding() {
+    return this.getAttribute("padding") || "s";
+  }
+  set padding(t) {
+    i(this, e, o).call(this, "padding", t);
+  }
+  get aspectRatio() {
+    return this.getAttribute("aspect-ratio");
+  }
+  set aspectRatio(t) {
+    i(this, e, o).call(this, "aspect-ratio", t);
+  }
+  get hasBorder() {
+    return this.hasAttribute("has-border");
+  }
+  set hasBorder(t) {
+    t && this.setAttribute("has-border", "");
+  }
+  get backgroundColor() {
+    return this.getAttribute(
+      "background-color"
+    );
+  }
+  set backgroundColor(t) {
+    i(this, e, o).call(this, "background-color", t);
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  set backgroundImage(t) {
+    i(this, e, o).call(this, "background-image", t);
+  }
+  get interactiveState() {
+    return this.getAttribute("interactive-state");
+  }
+  set interactiveState(t) {
+    i(this, e, o).call(this, "interactive-state", t);
+  }
+}
+e = new WeakSet(), /* ─── Helpers ─────────────────────────────────────────────── */
+v = function(t, s) {
+  s ? t.setAttribute("src", s) : t.removeAttribute("src");
+}, A = function(t) {
+  if (!t || t === "auto") {
+    this.$mediaWrapper.style.removeProperty("aspect-ratio");
+    return;
+  }
+  const s = t.replace(":", "/").replace(/\s+/g, "");
+  this.$mediaWrapper.style.aspectRatio = s.replace("/", " / ");
+}, d = function() {
+  if (this.$container) {
+    if (i(this, e, u).call(this)) {
+      i(this, e, p).call(this);
+      return;
+    }
+    i(this, e, h).call(this);
+  }
+}, c = function() {
+  this.$container && (i(this, e, u).call(this) || i(this, e, l).call(this));
+}, h = function() {
+  const t = this.backgroundColor, s = t || (this.inverted ? "container-strong" : "container-default");
+  this.$container.setAttribute("background-color", s);
+}, l = function() {
+  this.hasBorder ? (this.$container.setAttribute("border", "s"), this.$container.setAttribute("border-color", "main")) : this.$container.setAttribute("border", "none");
+}, p = function() {
+  if (this.$container) {
+    if (this.interactiveState === "hover") {
+      this.$container.setAttribute("border", "m"), this.$container.setAttribute("border-color", "state-hover"), this.$container.setAttribute("background-color", "state-hover-bordered");
+      return;
+    }
+    i(this, e, l).call(this), i(this, e, h).call(this);
+  }
+}, u = function() {
+  return this.interactiveState === "hover";
+}, x = function() {
+  const t = this.inverted;
+  this.querySelectorAll(":scope > *").forEach((s) => {
+    t && !s.hasAttribute("inverted") && s.setAttribute("inverted", "");
+  });
+}, o = function(t, s) {
+  s ? this.setAttribute(t, s) : this.removeAttribute(t);
+};
+customElements.get("px-card-container") || customElements.define("px-card-container", I);
+const B = ":host{display:block}:host(:not(:has(::slotted(*)))){display:none}", S = new CSSStyleSheet();
+S.replaceSync(B);
+class E extends HTMLElement {
+  template() {
+    return `
+      <px-vstack gap="2xs" align-items="flex-start">
+        <slot></slot>
+      </px-vstack>
+    `;
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [S], this.shadowRoot.innerHTML = this.template();
+  }
+}
+customElements.get("px-card-heading") || customElements.define("px-card-heading", E);
+const T = ":host{display:block}:host(:not(:has(::slotted(*)))){display:none}", f = new CSSStyleSheet();
+f.replaceSync(T);
+class M extends HTMLElement {
+  template() {
+    return `
+      <px-hstack gap="xs" justify-content="flex-end">
+        <px-hstack class="actions-buttons" gap="s" align-items="center" grow="1">
+          <slot></slot>
+        </px-hstack>
+        <slot name="more-action"></slot>
+      </px-hstack>
+    `;
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [f], this.shadowRoot.innerHTML = this.template();
+  }
+}
+customElements.get("px-card-actions") || customElements.define("px-card-actions", M);
+export {
+  M as CardActions,
+  I as CardContainer,
+  E as CardHeading,
+  D as cardContainerBackgroundColorValues,
+  j as cardContainerMediaPositionValues,
+  W as cardContainerMediaSizeValues
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@proximus/lavender-poke-card",
+  "version": "1.4.7-beta.2",
+  "description": "PokeCard web components: px-card-container, px-card-heading, px-card-actions",
+  "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
+    "test": "vitest run --coverage",
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@proximus/lavender-container": "*",
+    "@proximus/lavender-layout": "*"
+  },
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json"
+}