@luster-ui/ui 1.0.0

package/dist/collection/components/luster-modal/luster-modal.js

@@ -0,0 +1,215 @@
+import { h } from "@stencil/core";
+export class DcModal {
+    constructor() {
+        this.open = false;
+        this.heading = '';
+        this.subtitle = '';
+        this.confirmLabel = 'Proceed';
+        this.cancelLabel = 'Cancel';
+        this.size = 'md';
+        this.visible = false;
+        this.handleClose = () => {
+            this.open = false;
+            this.visible = false;
+            this.dcClose.emit();
+        };
+        this.handleConfirm = () => {
+            this.dcConfirm.emit();
+            this.handleClose();
+        };
+    }
+    watchOpen(newValue) {
+        this.visible = newValue;
+    }
+    componentWillLoad() {
+        this.visible = this.open;
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: "modal-overlay", onClick: e => {
+                if (e.target.classList.contains('modal-overlay'))
+                    this.handleClose();
+            } }, h("div", { class: `modal modal--${this.size}`, role: "dialog", "aria-modal": "true" }, h("div", { class: "modal__header" }, this.heading && h("h2", { class: "modal__title" }, this.heading), this.subtitle && h("p", { class: "modal__subtitle" }, this.subtitle), h("button", { class: "modal__close", onClick: this.handleClose, "aria-label": "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: "modal__body" }, h("slot", null)), h("div", { class: "modal__footer" }, h("slot", { name: "footer" }, h("luster-button", { variant: "secondary", onDcClick: this.handleClose }, this.cancelLabel), h("luster-button", { variant: "primary", onDcClick: this.handleConfirm }, this.confirmLabel))))));
+    }
+    static get is() { return "luster-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "''"
+            },
+            "confirmLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confirm-label",
+                "defaultValue": "'Proceed'"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-label",
+                "defaultValue": "'Cancel'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dcClose",
+                "name": "dcClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dcConfirm",
+                "name": "dcConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "watchOpen"
+            }];
+    }
+}

package/dist/collection/components/luster-modal/luster-modal.stories.js

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'Navigation/Modal',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Diálogo modal com overlay. Props: `open`, `heading`, `subtitle`, `confirm-label`, `cancel-label`, `size`.',
+            },
+        },
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Controla visibilidade',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        heading: { control: 'text', description: 'Título do modal' },
+        subtitle: { control: 'text', description: 'Subtítulo / descrição' },
+        confirmLabel: { control: 'text', description: 'Label do botão de confirmação' },
+        cancelLabel: { control: 'text', description: 'Label do botão de cancelamento' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Tamanho do modal',
+            table: { defaultValue: { summary: 'md' } },
+        },
+    },
+    args: {
+        open: true,
+        heading: 'Confirm action',
+        subtitle: 'This action cannot be undone.',
+        confirmLabel: 'Proceed',
+        cancelLabel: 'Cancel',
+        size: 'md',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <div style="position:relative;min-height:300px;">
+    <luster-modal
+      ?open="${args.open}"
+      heading="${args.heading}"
+      subtitle="${args.subtitle}"
+      confirm-label="${args.confirmLabel}"
+      cancel-label="${args.cancelLabel}"
+      size="${args.size}"
+    >
+      <p style="color:var(--dc-on-surface-variant);margin:0;">
+        Are you sure you want to proceed? All unsaved changes will be lost.
+      </p>
+    </luster-modal>
+  </div>
+`;
+export const Default = {
+    args: { open: true, heading: 'Confirm action', subtitle: 'This action cannot be undone.' },
+    render,
+};
+export const Small = {
+    args: { open: true, size: 'sm', heading: 'Quick confirm', subtitle: '' },
+    render,
+};
+export const Large = {
+    args: { open: true, size: 'lg', heading: 'Edit article', subtitle: 'Make your changes below.' },
+    render,
+};
+export const DeleteConfirm = {
+    name: 'Delete Confirmation',
+    args: {
+        open: true,
+        heading: 'Delete resource',
+        subtitle: 'This will permanently remove the resource.',
+        confirmLabel: 'Delete',
+        cancelLabel: 'Keep it',
+        size: 'sm',
+    },
+    render,
+};

package/dist/collection/components/luster-navbar/luster-navbar.css

@@ -0,0 +1,151 @@
+:host {
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-6);
+  padding: var(--dc-space-3) var(--dc-space-6);
+  background: var(--dc-glass-nav);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--dc-border-default);
+}
+
+.navbar__logo {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.navbar__logo-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.navbar__logo-title {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-label-lg);
+  font-weight: 700;
+  color: var(--dc-on-surface);
+  white-space: nowrap;
+}
+
+.navbar__logo-sub {
+  font-size: var(--dc-label-sm);
+  font-weight: 600;
+  color: var(--dc-on-surface-variant);
+  letter-spacing: var(--dc-tracking-wider);
+  text-transform: uppercase;
+}
+
+.navbar__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-1);
+  flex: 1;
+}
+
+.navbar__link {
+  font-size: var(--dc-body-md);
+  font-weight: 500;
+  color: var(--dc-on-surface-variant);
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--dc-space-1) var(--dc-space-3);
+  border-radius: var(--dc-round-2);
+  transition: color var(--dc-transition-fast), background var(--dc-transition-fast);
+}
+
+.navbar__link:hover {
+  color: var(--dc-on-surface);
+  background: var(--dc-hover-tint-md);
+}
+
+.navbar__link--active {
+  color: var(--dc-on-surface);
+  font-weight: 600;
+}
+
+.navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+  flex-shrink: 0;
+}
+
+.navbar__search {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+  background: var(--dc-glass-search);
+  border: 1px solid var(--dc-border-medium);
+  border-radius: var(--dc-round-full);
+  padding: var(--dc-space-1) var(--dc-space-3);
+  transition: border-color var(--dc-transition-fast);
+}
+
+.navbar__search:focus-within {
+  border-color: var(--dc-focus-ring-hover);
+}
+
+.navbar__search-icon {
+  color: var(--dc-on-surface-variant);
+  flex-shrink: 0;
+}
+
+.navbar__search-input {
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--dc-on-surface);
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-body-sm);
+  width: 140px;
+}
+
+.navbar__search-input::placeholder {
+  color: var(--dc-on-surface-variant);
+}
+
+.navbar__icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  background: none;
+  border: none;
+  border-radius: var(--dc-round-full);
+  color: var(--dc-on-surface-variant);
+  cursor: pointer;
+  transition: background var(--dc-transition-fast), color var(--dc-transition-fast);
+}
+
+.navbar__icon-btn:hover {
+  background: var(--dc-hover-tint-icon-md);
+  color: var(--dc-on-surface);
+}
+
+.navbar__avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--dc-round-full);
+  background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-dim));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--dc-font-display);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--dc-on-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+}

package/dist/collection/components/luster-navbar/luster-navbar.js

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+export class DcNavbar {
+    constructor() {
+        this.logoTitle = 'The Digital Curator';
+        this.logoSub = 'EDITORIAL SYSTEM';
+        this.activeLink = 'explorer';
+    }
+    render() {
+        return (h("nav", { key: 'e5dbbb0cc263cb87e559918ef5cc38fb3cfde204', class: "navbar" }, h("div", { key: 'f95606c6b5af2ae3ce1cab758f7c66b2f87f515c', class: "navbar__logo" }, h("div", { key: 'd482f382cddea590500018f3deb56bce9a3d1c14', class: "navbar__logo-icon" }, h("svg", { key: 'bc8261415478dfb00d86a6d39a0325c0cf93c95e', width: "22", height: "22", viewBox: "0 0 22 22", fill: "none" }, h("rect", { key: 'f13bf8767bbc656a51fbb2a93fb1cc47facaa35c', x: "2", y: "2", width: "8", height: "8", rx: "1.5", fill: "var(--dc-primary)", opacity: "0.9" }), h("rect", { key: 'd0424e2e33f7e13e2bf7a8058495f29bf9f6db8c', x: "12", y: "2", width: "8", height: "8", rx: "1.5", fill: "var(--dc-primary)", opacity: "0.55" }), h("rect", { key: '7c60e5ad1f221330882f26bedcdb091b4ce1d52a', x: "2", y: "12", width: "8", height: "8", rx: "1.5", fill: "var(--dc-primary)", opacity: "0.55" }), h("rect", { key: '2b513e2d6290e8879620533aa9c58ab49b1e4b32', x: "12", y: "12", width: "8", height: "8", rx: "1.5", fill: "var(--dc-primary)", opacity: "0.25" }))), h("div", { key: 'b3ca9864b28b79126c08275bca941fcf98354bc2', class: "navbar__logo-text" }, h("span", { key: 'aec2170c04b5d40cf32e5e8cfa2d860c84b002d0', class: "navbar__logo-title" }, this.logoTitle), h("span", { key: '5408c53b4aabcb10620b48d358d11ddc0f54c0b4', class: "navbar__logo-sub" }, this.logoSub))), h("div", { key: 'b0a4f7d1c7b157f87f3139bc9d97404c34108811', class: "navbar__nav" }, h("a", { key: '2db3c86508d3221e2f536121bc34be11a3f19d81', class: `navbar__link ${this.activeLink === 'explorer' ? 'navbar__link--active' : ''}` }, "Design System Explorer"), h("a", { key: '969e28208f8ed5b827c0a4bbe5ca355a3a7e04f2', class: "navbar__link" }, "Docs"), h("a", { key: 'b6acdb1baee7870c2cb58bb45aae9eb7d17a2159', class: "navbar__link" }, "Updates"), h("a", { key: 'dd590a967203a59a0f5200af95d11f0069da51a1', class: "navbar__link" }, "Community")), h("div", { key: 'c19d890b314017cdd5d4322e3b57ce5f4ae2051e', class: "navbar__actions" }, h("div", { key: '2cb9d4b178f73f85deda72a3a1838afbafae4bd0', class: "navbar__search" }, h("svg", { key: 'c2b50cfbb95a8910f18ed9a65771c4231f821640', class: "navbar__search-icon", width: "13", height: "13", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'b0844d54bdf2488c0f1631e2f1303b917fcbcafa', cx: "11", cy: "11", r: "8", stroke: "currentColor", "stroke-width": "2.5" }), h("path", { key: '8ae57987a06dc1adb093340e48b5507317b00159', d: "m21 21-4.35-4.35", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })), h("input", { key: '4effb00bb7c2a3b6bd136cc579586953f7d138a4', class: "navbar__search-input", placeholder: "Search components..." })), h("button", { key: '87f4634d7546500bbfdd2a8e47654d745b1e6fe3', class: "navbar__icon-btn", "aria-label": "Notifications" }, h("svg", { key: '0cf8c5e5b4cd9856d17b377f456316ebe2293fb0', width: "17", height: "17", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '89b2fe4434e9a3021ff3c7d8782dba2956334ebb', d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '74aabe2b9558adb47eb460d995993423517c2baa', d: "M13.73 21a2 2 0 0 1-3.46 0", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))), h("button", { key: '225948849df6c7f5b117a00a5a1ecf812c02b099', class: "navbar__icon-btn", "aria-label": "Settings" }, h("svg", { key: '841e4d3fa5a43c128a225cf242a9abe6958d4b09', width: "17", height: "17", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'df0e9409049654cab0aaf04a377f0ef829efa0be', cx: "12", cy: "12", r: "3", stroke: "currentColor", "stroke-width": "2" }), h("path", { key: 'f4e5f61b6706fc390c7221584dcd9e3ae6d86b9a', d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z", stroke: "currentColor", "stroke-width": "2" }))), h("div", { key: '5fa98a2166329a036352f71f8f5e68e1d053460b', class: "navbar__avatar" }, "DC"))));
+    }
+    static get is() { return "luster-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-navbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logoTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-title",
+                "defaultValue": "'The Digital Curator'"
+            },
+            "logoSub": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-sub",
+                "defaultValue": "'EDITORIAL SYSTEM'"
+            },
+            "activeLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-link",
+                "defaultValue": "'explorer'"
+            }
+        };
+    }
+}

package/dist/collection/components/luster-navbar/luster-navbar.stories.js

@@ -0,0 +1,41 @@
+import { html } from "lit";
+const meta = {
+    title: 'Navigation/Navbar',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Barra de navegação superior com logo, links e ações. Props: `logo-title`, `logo-sub`, `active-link`.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        logoTitle: { control: 'text', description: 'Título do logo' },
+        logoSub: { control: 'text', description: 'Subtítulo do logo' },
+        activeLink: {
+            control: 'select',
+            options: ['explorer', 'docs', 'updates', 'community'],
+            description: 'Link ativo',
+        },
+    },
+    args: {
+        logoTitle: 'The Digital Curator',
+        logoSub: 'EDITORIAL SYSTEM',
+        activeLink: 'explorer',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-navbar
+    logo-title="${args.logoTitle}"
+    logo-sub="${args.logoSub}"
+    active-link="${args.activeLink}"
+  ></luster-navbar>
+`;
+export const Default = { render };
+export const CustomBrand = {
+    name: 'Custom Brand',
+    args: { logoTitle: 'Luster DS', logoSub: 'DESIGN SYSTEM' },
+    render,
+};

package/dist/collection/components/luster-profile-card/luster-profile-card.css

@@ -0,0 +1,89 @@
+:host { display: block; }
+
+.profile-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dc-space-4);
+  padding: var(--dc-space-6);
+  background: var(--dc-surface-container-high);
+  border-radius: var(--dc-round-4);
+  text-align: center;
+}
+
+.profile-card__avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--dc-round-full);
+  background: linear-gradient(135deg, var(--dc-primary-dim), var(--dc-secondary-container));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  box-shadow: 0 0 0 3px var(--dc-focus-ring);
+}
+
+.profile-card__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-card__avatar-initials {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-headline-sm);
+  font-weight: 800;
+  color: var(--dc-on-primary);
+}
+
+.profile-card__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-1);
+}
+
+.profile-card__name {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-title-lg);
+  font-weight: 700;
+  color: var(--dc-on-surface);
+  margin: 0;
+  letter-spacing: var(--dc-tracking-tight);
+}
+
+.profile-card__role {
+  font-size: var(--dc-body-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.profile-card__stats {
+  display: flex;
+  gap: var(--dc-space-6);
+  width: 100%;
+  justify-content: center;
+  padding: var(--dc-space-3) 0;
+  border-top: 1px solid var(--dc-border-faint);
+  border-bottom: 1px solid var(--dc-border-faint);
+}
+
+.profile-card__stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.profile-card__stat-value {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-headline-sm);
+  font-weight: 800;
+  color: var(--dc-on-surface);
+}
+
+.profile-card__stat-label {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: var(--dc-tracking-wide);
+}