@luster-ui/ui 1.0.0

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

@@ -0,0 +1,120 @@
+:host { display: block; }
+
+.article-card {
+  background: var(--dc-surface-container-high);
+  border-radius: var(--dc-round-4);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: background var(--dc-transition-base);
+  cursor: pointer;
+}
+
+.article-card:hover { background: var(--dc-surface-bright); }
+
+.article-card__image {
+  position: relative;
+  height: 160px;
+  overflow: hidden;
+}
+
+.article-card__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.article-card__image-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, var(--dc-image-overlay-top) 0%, var(--dc-image-overlay-bottom) 100%);
+}
+
+.article-card__body {
+  padding: var(--dc-space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-3);
+  flex: 1;
+}
+
+.article-card__category {
+  font-size: var(--dc-label-sm);
+  font-weight: 700;
+  color: var(--dc-primary);
+  letter-spacing: var(--dc-tracking-wider);
+  text-transform: uppercase;
+}
+
+.article-card__date {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.article-card__title {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-title-lg);
+  font-weight: 700;
+  color: var(--dc-on-surface);
+  letter-spacing: var(--dc-tracking-tight);
+  line-height: 1.3;
+  margin: 0;
+}
+
+.article-card--featured .article-card__title {
+  font-size: var(--dc-headline-sm);
+}
+
+.article-card__excerpt {
+  font-size: var(--dc-body-sm);
+  color: var(--dc-on-surface-variant);
+  line-height: 1.6;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.article-card__byline {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+  margin-top: auto;
+}
+
+.article-card__author-avatar {
+  width: 24px;
+  height: 24px;
+  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-size: 10px;
+  font-weight: 700;
+  color: var(--dc-on-primary);
+  flex-shrink: 0;
+}
+
+.article-card__author {
+  display: block;
+  font-size: var(--dc-label-md);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+}
+
+.article-card__author-role {
+  display: block;
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.article-card__read-more {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-1);
+  font-size: var(--dc-label-sm);
+  color: var(--dc-primary);
+  margin-left: auto;
+}

package/dist/collection/components/luster-article-card/luster-article-card.js

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+export class DcArticleCard {
+    constructor() {
+        this.category = '';
+        this.heading = '';
+        this.excerpt = '';
+        this.date = '';
+        this.author = '';
+        this.authorRole = '';
+        this.imageUrl = '';
+        this.featured = false;
+    }
+    render() {
+        return (h("article", { key: '520f8dc527b674523094963a9fe21caa1bfe1cff', class: `article-card ${this.featured ? 'article-card--featured' : ''}` }, this.featured && this.imageUrl && (h("div", { key: '8f190538fbacc6e87be7573a5d91fce8c1f9dd53', class: "article-card__image" }, h("img", { key: '120e1b8d46076ab89333565f9b0c6b98ad6b2850', src: this.imageUrl, alt: this.heading }), h("div", { key: 'a31961b7c434a95ba063f5a0a121c5b3b4709484', class: "article-card__image-overlay" }))), h("div", { key: 'dd331d9b8896566747539b658d4e3c77eff11798', class: "article-card__body" }, this.category && (h("span", { key: '26f6c42e629c2576715d3c0b43ec61a73edbf8f1', class: "article-card__category" }, this.category)), this.date && !this.featured && (h("span", { key: '3d05f2ae1b3b102558422307b545f144ea920cd4', class: "article-card__date" }, this.date)), this.date && this.featured && (h("span", { key: '492c6989b62416e891349a7027ce9cade8be229a', class: "article-card__date" }, this.date)), h("h3", { key: 'aa7a850253dbf612ba16fa9b628a2abd25a74083', class: "article-card__title" }, this.heading), this.excerpt && (h("p", { key: '933fd34f4f424d95f94d05eacbe6b4694cc580a8', class: "article-card__excerpt" }, this.excerpt)), (this.author || this.authorRole) && (h("div", { key: 'b0a42dd52449991dab675fd2d492c6646f7f9dfc', class: "article-card__byline" }, h("div", { key: '2ea5b62143c7f4796f46faca3e6f1fa7419b6c93', class: "article-card__author-avatar" }, this.author.charAt(0)), h("div", { key: 'b1e7ff029659a237da73c7421f5742b1ce655a60' }, h("span", { key: 'e4a71f5e73610d6b5fcce237cd30a1f9eb8512ea', class: "article-card__author" }, this.author), this.authorRole && h("span", { key: '936042578927a847d0601bdfba58afafcc57cbf9', class: "article-card__author-role" }, this.authorRole)), h("span", { key: '5435de2d1ecb991c8500bbb3c7e22b3f3dc7f361', class: "article-card__read-more" }, h("svg", { key: '49186537061817a26ded5538a8b5cf185b5c5e1e', width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '7304d21f204471e939ebeeeb51d3eb817e392262', d: "M5 12h14M12 5l7 7-7 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), "More"))))));
+    }
+    static get is() { return "luster-article-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-article-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category",
+                "defaultValue": "''"
+            },
+            "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": "''"
+            },
+            "excerpt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "excerpt",
+                "defaultValue": "''"
+            },
+            "date": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date",
+                "defaultValue": "''"
+            },
+            "author": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "author",
+                "defaultValue": "''"
+            },
+            "authorRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "author-role",
+                "defaultValue": "''"
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-url",
+                "defaultValue": "''"
+            },
+            "featured": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "featured",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/luster-article-card/luster-article-card.stories.js

@@ -0,0 +1,82 @@
+import { html } from "lit";
+const meta = {
+    title: 'Cards/Article Card',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Cartão editorial de artigo com suporte a variante featured. Props: `heading`, `excerpt`, `date`, `author`, `author-role`, `category`, `image-url`, `featured`.',
+            },
+        },
+    },
+    argTypes: {
+        heading: { control: 'text', description: 'Título do artigo' },
+        excerpt: { control: 'text', description: 'Resumo do artigo' },
+        date: { control: 'text', description: 'Data de publicação' },
+        author: { control: 'text', description: 'Nome do autor' },
+        authorRole: { control: 'text', description: 'Cargo do autor' },
+        category: { control: 'text', description: 'Categoria' },
+        imageUrl: { control: 'text', description: 'URL da imagem (apenas no featured)' },
+        featured: {
+            control: 'boolean',
+            description: 'Layout destaque com imagem',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        heading: 'The Future of Editorial Design Systems',
+        excerpt: 'How modern design tokens and component libraries are reshaping the way editorial teams work.',
+        date: 'Apr 11, 2026',
+        author: 'Alex Curator',
+        authorRole: 'Lead Editor',
+        category: 'Design',
+        imageUrl: '',
+        featured: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-article-card
+    heading="${args.heading}"
+    excerpt="${args.excerpt}"
+    date="${args.date}"
+    author="${args.author}"
+    author-role="${args.authorRole}"
+    category="${args.category}"
+    image-url="${args.imageUrl}"
+    ?featured="${args.featured}"
+  ></luster-article-card>
+`;
+export const Default = { render };
+export const Featured = {
+    args: { featured: true },
+    render,
+};
+export const NoExcerpt = {
+    name: 'No Excerpt',
+    args: { excerpt: '' },
+    render,
+};
+export const AllCards = {
+    name: 'Grid of Cards',
+    render: () => html `
+    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:720px;">
+      <luster-article-card
+        heading="The Art of Dark Mode Typography"
+        excerpt="Choosing type that works in low-light editorial environments."
+        date="Apr 8, 2026"
+        author="Sam Viera"
+        author-role="Type Director"
+        category="Typography"
+      ></luster-article-card>
+      <luster-article-card
+        heading="Designing for Scannability"
+        excerpt="Readers skim. Design should help, not hinder."
+        date="Apr 5, 2026"
+        author="Jordan Reyes"
+        author-role="UX Writer"
+        category="UX"
+      ></luster-article-card>
+    </div>
+  `,
+};

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

@@ -0,0 +1,38 @@
+:host { display: inline-flex; }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-space-1);
+  border-radius: var(--dc-round-full);
+  font-family: var(--dc-font-body);
+  font-weight: 700;
+  letter-spacing: var(--dc-tracking-wide);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.badge--sm { padding: 2px var(--dc-space-2); font-size: 10px; }
+.badge--md { padding: var(--dc-space-1) var(--dc-space-3); font-size: var(--dc-label-sm); }
+
+.badge__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--dc-round-full);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+/* Variants */
+.badge--default  { background: rgba(64, 72, 93, 0.4); color: var(--dc-on-surface-variant); }
+.badge--primary  { background: rgba(163, 166, 255, 0.15); color: var(--dc-primary); }
+.badge--success  { background: rgba(76, 206, 172, 0.15); color: var(--dc-success); }
+.badge--warning  { background: rgba(255, 209, 102, 0.15); color: var(--dc-warning); }
+.badge--error    { background: rgba(255, 180, 171, 0.15); color: var(--dc-error); }
+.badge--beta     { background: rgba(182, 174, 228, 0.15); color: var(--dc-secondary); }
+.badge--live     { background: rgba(76, 206, 172, 0.2); color: var(--dc-success); animation: pulse 2s infinite; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}

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

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+export class DcBadge {
+    constructor() {
+        this.variant = 'default';
+        this.dot = false;
+        this.size = 'md';
+    }
+    render() {
+        return (h("span", { key: '4d49db25a7cb0f0bc72b5b7da55c7bdaca4a56a6', class: `badge badge--${this.variant} badge--${this.size}` }, this.dot && h("span", { key: '592ddbcbdfaa412bec7fa021c1e0d230d6716f41', class: "badge__dot" }), h("slot", { key: '8dcb4f58ac4c236ba6a1de5e22afed861bf78a7f' })));
+    }
+    static get is() { return "luster-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'primary' | 'success' | 'warning' | 'error' | 'beta' | 'live'",
+                    "resolved": "\"beta\" | \"default\" | \"error\" | \"live\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,86 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Badge',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Rótulo de status compacto. Props: `variant`, `size`, `dot`.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'primary', 'success', 'warning', 'error', 'beta', 'live'],
+            description: 'Estilo visual',
+            table: { defaultValue: { summary: 'default' } },
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md'],
+            description: 'Tamanho',
+            table: { defaultValue: { summary: 'md' } },
+        },
+        dot: {
+            control: 'boolean',
+            description: 'Exibe indicador de ponto',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        label: { control: 'text', description: 'Texto do badge (slot)' },
+    },
+    args: {
+        variant: 'default',
+        size: 'md',
+        dot: false,
+        label: 'Badge',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-badge variant="${args.variant}" size="${args.size}" ?dot="${args.dot}">
+    ${args.label}
+  </luster-badge>
+`;
+export const Default = {
+    args: { variant: 'default', label: 'Default' },
+    render,
+};
+export const Primary = {
+    args: { variant: 'primary', label: 'Primary' },
+    render,
+};
+export const Success = {
+    args: { variant: 'success', label: 'Active', dot: true },
+    render,
+};
+export const Warning = {
+    args: { variant: 'warning', label: 'Warning' },
+    render,
+};
+export const Error = {
+    args: { variant: 'error', label: 'Error' },
+    render,
+};
+export const Beta = {
+    args: { variant: 'beta', label: 'Beta' },
+    render,
+};
+export const Live = {
+    args: { variant: 'live', label: 'Live', dot: true },
+    render,
+};
+export const AllVariants = {
+    name: 'All Variants',
+    render: () => html `
+    <div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;">
+      <luster-badge variant="default">Default</luster-badge>
+      <luster-badge variant="primary">Primary</luster-badge>
+      <luster-badge variant="success" ?dot="${true}">Active</luster-badge>
+      <luster-badge variant="warning">Warning</luster-badge>
+      <luster-badge variant="error">Error</luster-badge>
+      <luster-badge variant="beta">Beta</luster-badge>
+      <luster-badge variant="live" ?dot="${true}">Live</luster-badge>
+    </div>
+  `,
+};