@eui/eds-wc 22.0.0-alpha.39 → 22.0.0-alpha.41

package/eds-content-item/eds-wc-content-item.d.ts

@@ -0,0 +1,110 @@
+import { EdsBaseElement } from '../shared/index.js';
+/**
+ * `<eds-wc-content-item>` — A flexible teaser that links to a page of interest and gives a quick
+ * overview of its content. Supports picture (left / right / top), inline (event/date-block) and
+ * divider variants. Layout is derived from projected children:
+ *
+ * - A `<eds-wc-content-item-picture position="top">` switches to stacked layout.
+ * - A `<eds-wc-date-block>` switches to inline (event) layout.
+ *
+ * @slot picture - Picture wrapper (`<eds-wc-content-item-picture>`).
+ * @slot date-block - Date block element (`<eds-wc-date-block>`).
+ * @slot - Default slot (typically `<eds-wc-content-item-body>` and any other content).
+ *
+ * @example
+ * ```html
+ * <eds-wc-content-item>
+ *   <eds-wc-content-item-picture slot="picture">
+ *     <img class="eds-content-item__image" src="news.jpg" alt="" />
+ *   </eds-wc-content-item-picture>
+ *   <eds-wc-content-item-body>
+ *     <eds-wc-content-item-title><a href="/news">Headline</a></eds-wc-content-item-title>
+ *     <eds-wc-content-item-description>Teaser text.</eds-wc-content-item-description>
+ *   </eds-wc-content-item-body>
+ * </eds-wc-content-item>
+ * ```
+ */
+export declare class EdsWcContentItem extends EdsBaseElement {
+    /** Whether to display a bottom divider (for vertical lists). */
+    hasDivider: boolean;
+    /** Data attribute for e2e testing. */
+    dataE2e: string;
+    /** ARIA role (reflected, defaults to `article`). */
+    role: string;
+    private _isStack;
+    private _isInline;
+    private _picturePosition;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+    private _reflectLayout;
+    private _onPictureSlotChange;
+    private _onDateBlockSlotChange;
+}
+export type EdsWcContentItemPicturePosition = 'left' | 'right' | 'top';
+export type EdsWcContentItemPictureSize = 'large' | 'small';
+/**
+ * `<eds-wc-content-item-picture>` — Wrapper for the content item's image.
+ * Controls image size, position relative to the content, and an optional hover zoom.
+ *
+ * @slot - The native `<img>` (add `class="eds-content-item__image"` to it).
+ */
+export declare class EdsWcContentItemPicture extends EdsBaseElement {
+    /** Position relative to the content. `top` switches parent to stacked layout. */
+    position: EdsWcContentItemPicturePosition;
+    /** Size of the picture. `small` renders a compact square thumbnail. */
+    size: EdsWcContentItemPictureSize;
+    /** Enables a subtle zoom effect on hover. */
+    hasZoom: boolean;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export declare class EdsWcContentItemBody extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export declare class EdsWcContentItemLabels extends EdsBaseElement {
+    /** ARIA role for the labels group (reflected, defaults to `group`). */
+    role: string;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export declare class EdsWcContentItemPrimaryMeta extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Add dot separators between consecutive children (the ::slotted pseudo
+     * can only target one compound selector, so we use JS for the ::before).
+     */
+    private _addDots;
+}
+export declare class EdsWcContentItemTitle extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export declare class EdsWcContentItemDescription extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export declare class EdsWcContentItemSecondaryMeta extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export declare class EdsWcContentItemSecondaryMetaItem extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-content-item': EdsWcContentItem;
+        'eds-wc-content-item-picture': EdsWcContentItemPicture;
+        'eds-wc-content-item-body': EdsWcContentItemBody;
+        'eds-wc-content-item-labels': EdsWcContentItemLabels;
+        'eds-wc-content-item-primary-meta': EdsWcContentItemPrimaryMeta;
+        'eds-wc-content-item-title': EdsWcContentItemTitle;
+        'eds-wc-content-item-description': EdsWcContentItemDescription;
+        'eds-wc-content-item-secondary-meta': EdsWcContentItemSecondaryMeta;
+        'eds-wc-content-item-secondary-meta-item': EdsWcContentItemSecondaryMetaItem;
+    }
+}
+//# sourceMappingURL=eds-wc-content-item.d.ts.map

package/eds-content-item/eds-wc-content-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-content-item.d.ts","sourceRoot":"","sources":["../../src/eds-content-item/eds-wc-content-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAMpD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAChD,gEAAgE;IAEhE,UAAU,UAAS;IAEnB,sCAAsC;IAEtC,OAAO,SAAsB;IAE7B,oDAAoD;IAE3C,IAAI,SAAa;IAEjB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,gBAAgB,CAAuB;IAExD,OAAgB,MAAM,0BAuCpB;cAEiB,MAAM;cAQN,OAAO,IAAI,IAAI;IAIlC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,sBAAsB;CAKjC;AAMD,MAAM,MAAM,+BAA+B,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AACvE,MAAM,MAAM,2BAA2B,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5D;;;;;GAKG;AACH,qBACa,uBAAwB,SAAQ,cAAc;IACvD,iFAAiF;IAEjF,QAAQ,EAAE,+BAA+B,CAAU;IAEnD,uEAAuE;IAEvE,IAAI,EAAE,2BAA2B,CAAW;IAE5C,6CAA6C;IAE7C,OAAO,UAAS;IAEhB,OAAgB,MAAM,0BAyCpB;cAEiB,MAAM;CAG5B;AAMD,qBACa,oBAAqB,SAAQ,cAAc;IACpD,OAAgB,MAAM,0BAQpB;cAEiB,MAAM;CAG5B;AAMD,qBACa,sBAAuB,SAAQ,cAAc;IACtD,uEAAuE;IAE9D,IAAI,SAAW;IAExB,OAAgB,MAAM,0BAOpB;cAEiB,MAAM;CAG5B;AAMD,qBACa,2BAA4B,SAAQ,cAAc;IAC3D,OAAgB,MAAM,0BAiBpB;cAEiB,MAAM;IAIzB;;;OAGG;IACH,OAAO,CAAC,QAAQ;CAwBnB;AAMD,qBACa,qBAAsB,SAAQ,cAAc;IACrD,OAAgB,MAAM,0BAMpB;cAEiB,MAAM;CAG5B;AAMD,qBACa,2BAA4B,SAAQ,cAAc;IAC3D,OAAgB,MAAM,0BAMpB;cAEiB,MAAM;CAG5B;AAMD,qBACa,6BAA8B,SAAQ,cAAc;IAC7D,OAAgB,MAAM,0BASpB;cAEiB,MAAM;CAG5B;AAMD,qBACa,iCAAkC,SAAQ,cAAc;IACjE,OAAgB,MAAM,0BAMpB;cAEiB,MAAM;CAG5B;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,gBAAgB,CAAC;QACxC,6BAA6B,EAAE,uBAAuB,CAAC;QACvD,0BAA0B,EAAE,oBAAoB,CAAC;QACjD,4BAA4B,EAAE,sBAAsB,CAAC;QACrD,kCAAkC,EAAE,2BAA2B,CAAC;QAChE,2BAA2B,EAAE,qBAAqB,CAAC;QACnD,iCAAiC,EAAE,2BAA2B,CAAC;QAC/D,oCAAoC,EAAE,6BAA6B,CAAC;QACpE,yCAAyC,EAAE,iCAAiC,CAAC;KAChF;CACJ"}

package/eds-content-item/eds-wc-content-item.js

@@ -0,0 +1,420 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { EdsBaseElement } from '../shared/index.js';
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item — Main container
+ * ──────────────────────────────────────────────────────────────────────────── */
+/**
+ * `<eds-wc-content-item>` — A flexible teaser that links to a page of interest and gives a quick
+ * overview of its content. Supports picture (left / right / top), inline (event/date-block) and
+ * divider variants. Layout is derived from projected children:
+ *
+ * - A `<eds-wc-content-item-picture position="top">` switches to stacked layout.
+ * - A `<eds-wc-date-block>` switches to inline (event) layout.
+ *
+ * @slot picture - Picture wrapper (`<eds-wc-content-item-picture>`).
+ * @slot date-block - Date block element (`<eds-wc-date-block>`).
+ * @slot - Default slot (typically `<eds-wc-content-item-body>` and any other content).
+ *
+ * @example
+ * ```html
+ * <eds-wc-content-item>
+ *   <eds-wc-content-item-picture slot="picture">
+ *     <img class="eds-content-item__image" src="news.jpg" alt="" />
+ *   </eds-wc-content-item-picture>
+ *   <eds-wc-content-item-body>
+ *     <eds-wc-content-item-title><a href="/news">Headline</a></eds-wc-content-item-title>
+ *     <eds-wc-content-item-description>Teaser text.</eds-wc-content-item-description>
+ *   </eds-wc-content-item-body>
+ * </eds-wc-content-item>
+ * ```
+ */
+let EdsWcContentItem = class EdsWcContentItem extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /** Whether to display a bottom divider (for vertical lists). */
+        this.hasDivider = false;
+        /** Data attribute for e2e testing. */
+        this.dataE2e = 'eds-content-item';
+        /** ARIA role (reflected, defaults to `article`). */
+        this.role = 'article';
+        this._isStack = false;
+        this._isInline = false;
+        this._picturePosition = null;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+
+        :host {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: flex-start;
+            gap: var(--eds-sp-m);
+            font: var(--eds-f-paragraph-m);
+            color: var(--eds-c-foreground);
+        }
+
+        :host([picture-position='right']) ::slotted([slot='picture']) {
+            order: 2;
+        }
+
+        :host([stack]) {
+            flex-direction: column;
+            align-items: stretch;
+            gap: var(--eds-sp-s);
+        }
+
+        :host([inline]) {
+            align-items: flex-start;
+            gap: var(--eds-sp-m);
+        }
+
+        :host([divider]) {
+            padding-bottom: var(--eds-sp-m);
+            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+        }
+
+        /* Responsive: collapse to stacked on mobile for non-inline variants */
+        @media (max-width: 767px) {
+            :host(:not([inline])) {
+                flex-direction: column;
+                align-items: stretch;
+            }
+        }
+    `; }
+    render() {
+        return html `
+            <slot name="picture" @slotchange="${this._onPictureSlotChange}"></slot>
+            <slot name="date-block" @slotchange="${this._onDateBlockSlotChange}"></slot>
+            <slot></slot>
+        `;
+    }
+    updated() {
+        this._reflectLayout();
+    }
+    _reflectLayout() {
+        this.toggleAttribute('stack', this._isStack);
+        this.toggleAttribute('inline', this._isInline);
+        if (this._picturePosition) {
+            this.setAttribute('picture-position', this._picturePosition);
+        }
+        else {
+            this.removeAttribute('picture-position');
+        }
+    }
+    _onPictureSlotChange(e) {
+        const slot = e.target;
+        const pictures = slot.assignedElements();
+        if (pictures.length > 0) {
+            const picture = pictures[0];
+            const pos = picture.getAttribute('position') || 'left';
+            const nextStack = pos === 'top';
+            if (this._isStack !== nextStack)
+                this._isStack = nextStack;
+            if (this._picturePosition !== pos)
+                this._picturePosition = pos;
+        }
+        else {
+            if (this._isStack)
+                this._isStack = false;
+            if (this._picturePosition !== null)
+                this._picturePosition = null;
+        }
+    }
+    _onDateBlockSlotChange(e) {
+        const slot = e.target;
+        const next = slot.assignedElements().length > 0;
+        if (this._isInline !== next)
+            this._isInline = next;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'divider' })
+], EdsWcContentItem.prototype, "hasDivider", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-e2e' })
+], EdsWcContentItem.prototype, "dataE2e", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'role' })
+], EdsWcContentItem.prototype, "role", void 0);
+__decorate([
+    state()
+], EdsWcContentItem.prototype, "_isStack", void 0);
+__decorate([
+    state()
+], EdsWcContentItem.prototype, "_isInline", void 0);
+__decorate([
+    state()
+], EdsWcContentItem.prototype, "_picturePosition", void 0);
+EdsWcContentItem = __decorate([
+    customElement('eds-wc-content-item')
+], EdsWcContentItem);
+export { EdsWcContentItem };
+/**
+ * `<eds-wc-content-item-picture>` — Wrapper for the content item's image.
+ * Controls image size, position relative to the content, and an optional hover zoom.
+ *
+ * @slot - The native `<img>` (add `class="eds-content-item__image"` to it).
+ */
+let EdsWcContentItemPicture = class EdsWcContentItemPicture extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /** Position relative to the content. `top` switches parent to stacked layout. */
+        this.position = 'left';
+        /** Size of the picture. `small` renders a compact square thumbnail. */
+        this.size = 'large';
+        /** Enables a subtle zoom effect on hover. */
+        this.hasZoom = false;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+
+        :host {
+            --_eds-content-item-picture-width: 13.125rem;
+            --_eds-content-item-picture-ratio: 3 / 2;
+
+            display: block;
+            flex: 0 0 auto;
+            width: var(--_eds-content-item-picture-width);
+            aspect-ratio: var(--_eds-content-item-picture-ratio);
+            overflow: hidden;
+            border-radius: var(--eds-br-m);
+        }
+
+        ::slotted(.eds-content-item__image) {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+
+        :host([size='large']) {
+            --_eds-content-item-picture-width: 13.125rem;
+            --_eds-content-item-picture-ratio: 3 / 2;
+        }
+
+        :host([size='small']) {
+            --_eds-content-item-picture-width: 8.75rem;
+            --_eds-content-item-picture-ratio: 1 / 1;
+        }
+
+        :host([position='top']) {
+            --_eds-content-item-picture-width: 100%;
+            --_eds-content-item-picture-ratio: 16 / 9;
+        }
+
+        :host([zoom]:hover) ::slotted(.eds-content-item__image) {
+            transform: scale(1.05);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcContentItemPicture.prototype, "position", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcContentItemPicture.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'zoom' })
+], EdsWcContentItemPicture.prototype, "hasZoom", void 0);
+EdsWcContentItemPicture = __decorate([
+    customElement('eds-wc-content-item-picture')
+], EdsWcContentItemPicture);
+export { EdsWcContentItemPicture };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-body — Content block
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemBody = class EdsWcContentItemBody extends EdsBaseElement {
+    static { this.styles = css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-width: 0;
+            gap: var(--eds-sp-xs);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+EdsWcContentItemBody = __decorate([
+    customElement('eds-wc-content-item-body')
+], EdsWcContentItemBody);
+export { EdsWcContentItemBody };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-labels — Labels group
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemLabels = class EdsWcContentItemLabels extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /** ARIA role for the labels group (reflected, defaults to `group`). */
+        this.role = 'group';
+    }
+    static { this.styles = css `
+        :host {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--eds-sp-2xs);
+            margin-bottom: var(--eds-sp-3xs);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: 'role' })
+], EdsWcContentItemLabels.prototype, "role", void 0);
+EdsWcContentItemLabels = __decorate([
+    customElement('eds-wc-content-item-labels')
+], EdsWcContentItemLabels);
+export { EdsWcContentItemLabels };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-primary-meta — Primary metadata
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemPrimaryMeta = class EdsWcContentItemPrimaryMeta extends EdsBaseElement {
+    static { this.styles = css `
+        :host {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--eds-sp-xs);
+            font: var(--eds-f-microcopy-xs);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--eds-c-foreground);
+        }
+
+        /* Dot separators between consecutive slotted meta entries */
+        ::slotted(* + *) {
+            padding-left: calc(var(--eds-sp-3xs) + var(--eds-sp-xs));
+            position: relative;
+        }
+    `; }
+    render() {
+        return html `<slot @slotchange="${this._addDots}"></slot>`;
+    }
+    /**
+     * Add dot separators between consecutive children (the ::slotted pseudo
+     * can only target one compound selector, so we use JS for the ::before).
+     */
+    _addDots(e) {
+        const slot = e.target;
+        const children = slot.assignedElements();
+        children.forEach((child, i) => {
+            const el = child;
+            // Clean up any previously injected dots.
+            el.querySelectorAll('.eds-ci-dot').forEach(d => d.remove());
+            if (i > 0) {
+                const dot = document.createElement('span');
+                dot.className = 'eds-ci-dot';
+                dot.setAttribute('aria-hidden', 'true');
+                dot.style.cssText = `
+                    display: inline-block;
+                    width: var(--eds-sp-3xs);
+                    height: var(--eds-sp-3xs);
+                    margin-right: var(--eds-sp-xs);
+                    border-radius: var(--eds-br-full);
+                    background: currentcolor;
+                    vertical-align: middle;
+                `;
+                el.insertBefore(dot, el.firstChild);
+            }
+        });
+    }
+};
+EdsWcContentItemPrimaryMeta = __decorate([
+    customElement('eds-wc-content-item-primary-meta')
+], EdsWcContentItemPrimaryMeta);
+export { EdsWcContentItemPrimaryMeta };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-title — Title
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemTitle = class EdsWcContentItemTitle extends EdsBaseElement {
+    static { this.styles = css `
+        :host {
+            display: block;
+            font: var(--eds-f-heading-xs);
+            color: var(--eds-c-foreground);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+EdsWcContentItemTitle = __decorate([
+    customElement('eds-wc-content-item-title')
+], EdsWcContentItemTitle);
+export { EdsWcContentItemTitle };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-description — Description
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemDescription = class EdsWcContentItemDescription extends EdsBaseElement {
+    static { this.styles = css `
+        :host {
+            display: block;
+            font: var(--eds-f-paragraph-m);
+            color: var(--eds-c-foreground);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+EdsWcContentItemDescription = __decorate([
+    customElement('eds-wc-content-item-description')
+], EdsWcContentItemDescription);
+export { EdsWcContentItemDescription };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-secondary-meta — Secondary metadata container
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemSecondaryMeta = class EdsWcContentItemSecondaryMeta extends EdsBaseElement {
+    static { this.styles = css `
+        :host {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--eds-sp-xs) var(--eds-sp-m);
+            margin-top: var(--eds-sp-3xs);
+            font: var(--eds-f-paragraph-s);
+            color: var(--eds-c-foreground);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+EdsWcContentItemSecondaryMeta = __decorate([
+    customElement('eds-wc-content-item-secondary-meta')
+], EdsWcContentItemSecondaryMeta);
+export { EdsWcContentItemSecondaryMeta };
+/* ────────────────────────────────────────────────────────────────────────────
+ * eds-wc-content-item-secondary-meta-item — Single secondary meta entry
+ * ──────────────────────────────────────────────────────────────────────────── */
+let EdsWcContentItemSecondaryMetaItem = class EdsWcContentItemSecondaryMetaItem extends EdsBaseElement {
+    static { this.styles = css `
+        :host {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--eds-sp-2xs);
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+EdsWcContentItemSecondaryMetaItem = __decorate([
+    customElement('eds-wc-content-item-secondary-meta-item')
+], EdsWcContentItemSecondaryMetaItem);
+export { EdsWcContentItemSecondaryMetaItem };
+//# sourceMappingURL=eds-wc-content-item.js.map

package/eds-content-item/eds-wc-content-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-content-item.js","sourceRoot":"","sources":["../../src/eds-content-item/eds-wc-content-item.ts"],"names":[],"mappings":"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"}

package/eds-content-item/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsWcContentItem, EdsWcContentItemPicture, EdsWcContentItemBody, EdsWcContentItemLabels, EdsWcContentItemPrimaryMeta, EdsWcContentItemTitle, EdsWcContentItemDescription, EdsWcContentItemSecondaryMeta, EdsWcContentItemSecondaryMetaItem, } from './eds-wc-content-item';
+export type { EdsWcContentItemPicturePosition, EdsWcContentItemPictureSize, } from './eds-wc-content-item';
+//# sourceMappingURL=index.d.ts.map

package/eds-content-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-content-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,2BAA2B,EAC3B,qBAAqB,EACrB,2BAA2B,EAC3B,6BAA6B,EAC7B,iCAAiC,GACpC,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACR,+BAA+B,EAC/B,2BAA2B,GAC9B,MAAM,uBAAuB,CAAC"}

package/eds-content-item/index.js

@@ -0,0 +1,2 @@
+export { EdsWcContentItem, EdsWcContentItemPicture, EdsWcContentItemBody, EdsWcContentItemLabels, EdsWcContentItemPrimaryMeta, EdsWcContentItemTitle, EdsWcContentItemDescription, EdsWcContentItemSecondaryMeta, EdsWcContentItemSecondaryMetaItem, } from './eds-wc-content-item';
+//# sourceMappingURL=index.js.map

package/eds-content-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-content-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,2BAA2B,EAC3B,qBAAqB,EACrB,2BAA2B,EAC3B,6BAA6B,EAC7B,iCAAiC,GACpC,MAAM,uBAAuB,CAAC"}

package/eds-input-text/eds-wc-input-text.d.ts

@@ -1,4 +1,6 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
+/** Size variants supported by the EDS text input (mirrors `EdsInputTextSize`). */
+export type EdsWcInputTextSize = 's' | 'm' | 'l';
 /**
  * `<eds-wc-input-text>` — EDS Text Input Web Component.
  *
@@ -37,6 +39,8 @@ export declare class EdsWcInputText extends EdsBaseElement {
     clearable: boolean;
     /** Show a loading spinner inside the input. */
     loading: boolean;
+    /** Size variant — reflected as the `size` host attribute. */
+    size: EdsWcInputTextSize;
     /** Accessible label (when no visible label element). */
     ariaLabel: string | null;
     private _input;

package/eds-input-text/eds-wc-input-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-input-text.d.ts","sourceRoot":"","sources":["../../src/eds-input-text/eds-wc-input-text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,cAAe,SAAQ,cAAc;IAC9C,qBAAqB;IAErB,KAAK,SAAM;IAEX,wBAAwB;IAExB,WAAW,SAAM;IAEjB,wDAAwD;IAExD,IAAI,SAAU;IAEd,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,OAAO,UAAS;IAEhB,kDAAkD;IAElD,SAAS,UAAS;IAElB,+CAA+C;IAE/C,OAAO,UAAS;IAEhB,wDAAwD;IAE/C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGzC,OAAO,CAAC,MAAM,CAAoB;IAElC,sDAAsD;IACtD,IAAI,YAAY,IAAI,gBAAgB,CAEnC;IAED,OAAgB,MAAM,0BAuHpB;cAEiB,MAAM;IA6BzB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,QAAQ;CAOnB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,cAAc,CAAC;KACvC;CACJ"}
+{"version":3,"file":"eds-wc-input-text.d.ts","sourceRoot":"","sources":["../../src/eds-input-text/eds-wc-input-text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,kFAAkF;AAClF,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,cAAe,SAAQ,cAAc;IAC9C,qBAAqB;IAErB,KAAK,SAAM;IAEX,wBAAwB;IAExB,WAAW,SAAM;IAEjB,wDAAwD;IAExD,IAAI,SAAU;IAEd,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,OAAO,UAAS;IAEhB,kDAAkD;IAElD,SAAS,UAAS;IAElB,+CAA+C;IAE/C,OAAO,UAAS;IAEhB,6DAA6D;IAE7D,IAAI,EAAE,kBAAkB,CAAO;IAE/B,wDAAwD;IAE/C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGzC,OAAO,CAAC,MAAM,CAAoB;IAElC,sDAAsD;IACtD,IAAI,YAAY,IAAI,gBAAgB,CAEnC;IAED,OAAgB,MAAM,0BAkJpB;cAEiB,MAAM;IA6BzB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,QAAQ;CAOnB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,cAAc,CAAC;KACvC;CACJ"}

package/eds-input-text/eds-wc-input-text.js

@@ -47,6 +47,8 @@ let EdsWcInputText = class EdsWcInputText extends EdsBaseElement {
         this.clearable = false;
         /** Show a loading spinner inside the input. */
         this.loading = false;
+        /** Size variant — reflected as the `size` host attribute. */
+        this.size = 'm';
         /** Accessible label (when no visible label element). */
         this.ariaLabel = null;
     }
@@ -60,16 +62,42 @@ let EdsWcInputText = class EdsWcInputText extends EdsBaseElement {
             position: relative;
         }
 
+        :host {
+            /* Size-driven privates (defaults = m) */
+            --_eds-input-text-min-height: var(--eds-si-4xl);
+            --_eds-input-text-pad-v: var(--eds-sp-xs);
+            --_eds-input-text-pad-h: var(--eds-sp-s);
+            --_eds-input-text-font: var(--eds-f-paragraph-m);
+            --_eds-input-text-placeholder-font: var(--eds-f-placeholder-m);
+        }
+
+        :host([size="s"]) {
+            --_eds-input-text-min-height: var(--eds-si-3xl); /* 32px */
+            --_eds-input-text-pad-v: var(--eds-sp-2xs);
+            --_eds-input-text-pad-h: var(--eds-sp-s);
+            --_eds-input-text-font: var(--eds-f-paragraph-s);
+            --_eds-input-text-placeholder-font: var(--eds-f-placeholder-s);
+        }
+
+        :host([size="l"]) {
+            --_eds-input-text-min-height: var(--eds-si-6xl); /* 48px */
+            --_eds-input-text-pad-v: var(--eds-sp-s);
+            --_eds-input-text-pad-h: var(--eds-sp-m);
+            --_eds-input-text-font: var(--eds-f-paragraph-l);
+            /* No --eds-f-placeholder-l token exists; l reuses the m placeholder font. */
+            --_eds-input-text-placeholder-font: var(--eds-f-placeholder-m);
+        }
+
         input {
-            font: var(--eds-f-paragraph-m);
+            font: var(--_eds-input-text-font);
             appearance: none;
             background-color: var(--eds-c-surface-elevation);
             border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
             border-radius: var(--eds-br-s);
             box-shadow: none;
             color: var(--eds-c-foreground-default);
-            min-height: var(--eds-si-3xl);
-            padding: var(--eds-sp-xs) var(--eds-sp-s);
+            min-height: var(--_eds-input-text-min-height);
+            padding: var(--_eds-input-text-pad-v) var(--_eds-input-text-pad-h);
             width: 100%;
             box-sizing: border-box;
             outline: none;
@@ -77,7 +105,8 @@ let EdsWcInputText = class EdsWcInputText extends EdsBaseElement {
         }
 
         input::placeholder {
-            color: var(--eds-c-foreground-subtler);
+            color: var(--eds-c-foreground-placeholder);
+            font: var(--_eds-input-text-placeholder-font);
             opacity: 1;
         }
 
@@ -240,6 +269,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EdsWcInputText.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcInputText.prototype, "size", void 0);
 __decorate([
     property({ type: String, attribute: 'aria-label' })
 ], EdsWcInputText.prototype, "ariaLabel", void 0);