@luster-ui/ui 1.0.0

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

@@ -0,0 +1,119 @@
+:host { display: block; }
+
+.hero {
+  position: relative;
+  min-height: 320px;
+  border-radius: var(--dc-round-4);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+}
+
+.hero__bg {
+  position: absolute;
+  inset: 0;
+}
+
+.hero__bg-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero__bg-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--dc-overlay-surface);
+}
+
+.hero__bg-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    var(--dc-image-overlay-bottom) 0%,
+    var(--dc-image-overlay-top) 50%,
+    transparent 100%
+  );
+}
+
+/* Parallax glow effect when no image */
+.hero--parallax .hero__bg::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse at 20% 30%, var(--dc-hero-glow-primary) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 60%, var(--dc-hero-glow-dim) 0%, transparent 40%),
+    radial-gradient(ellipse at 50% 80%, var(--dc-hero-glow-secondary) 0%, transparent 40%),
+    var(--dc-surface-container);
+  z-index: 1;
+}
+
+.hero__content {
+  position: relative;
+  z-index: 2;
+  padding: var(--dc-space-10) var(--dc-space-10) var(--dc-space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-4);
+  width: 100%;
+}
+
+.hero__section {
+  font-size: var(--dc-label-sm);
+  font-weight: 700;
+  color: var(--dc-primary);
+  letter-spacing: var(--dc-tracking-wider);
+  text-transform: uppercase;
+}
+
+.hero__title {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-display-md);
+  font-weight: 800;
+  color: var(--dc-on-surface);
+  letter-spacing: var(--dc-tracking-tight);
+  line-height: 1.05;
+  margin: 0;
+  max-width: 560px;
+}
+
+.hero__subtitle {
+  font-size: var(--dc-body-md);
+  color: var(--dc-on-surface-variant);
+  max-width: 480px;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.hero__actions {
+  display: flex;
+  gap: var(--dc-space-3);
+  flex-wrap: wrap;
+}
+
+.hero__layer-badge {
+  position: absolute;
+  top: var(--dc-space-4);
+  right: var(--dc-space-4);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.hero__layer-text {
+  font-size: var(--dc-label-sm);
+  font-weight: 600;
+  color: var(--dc-hero-badge-text);
+  letter-spacing: var(--dc-tracking-wide);
+}
+
+.hero__layer-sub {
+  font-size: 10px;
+  color: var(--dc-hero-badge-sub);
+  font-family: monospace;
+}

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

@@ -0,0 +1,129 @@
+import { h } from "@stencil/core";
+export class DcHero {
+    constructor() {
+        this.heading = '';
+        this.subtitle = '';
+        this.section = '';
+        this.imageUrl = '';
+        this.parallax = false;
+    }
+    render() {
+        return (h("section", { key: '1cb214e7059158e7153d468b9fa840ce98f10aeb', class: `hero ${this.parallax ? 'hero--parallax' : ''}` }, h("div", { key: '4547dbead7926629a4e915ea8cf33d56679baa49', class: "hero__bg" }, this.imageUrl && (h("img", { key: 'c07cc9f3c5416a05f6034ae5d4ac0a8ada6f6f8f', class: "hero__bg-img", src: this.imageUrl, alt: "", "aria-hidden": "true" })), h("div", { key: 'e81099f7d4601beac31e59058488195ac4a0fc22', class: "hero__bg-overlay" }), h("div", { key: 'e5cc125505c0b58ad75d31417b07d298743407ec', class: "hero__bg-gradient" })), h("div", { key: '74a713512ea9aba2e79202814b21d50017169576', class: "hero__content" }, this.section && (h("span", { key: '7d05f909669493c03fabc623b6716a8bd86e2493', class: "hero__section" }, this.section)), h("h1", { key: '4fdfe3e350c16222b084490593fb231d090b490a', class: "hero__title" }, this.heading), this.subtitle && (h("p", { key: 'f30209ac7d84bfe259b0852b2779c50bc1a9f4bd', class: "hero__subtitle" }, this.subtitle)), h("div", { key: 'b2f9656bdb0a921d95b328771457ac841ed03df9', class: "hero__actions" }, h("slot", { key: '758806782726fc7e4b66b037afe554e524d05c74' }))), h("div", { key: 'b6468db237dfc6b2e859117bd1419c746a8e0032', class: "hero__layer-badge" }, h("span", { key: '2bc5f3dc8f6b16bfb3ac18c76d8cd656e48c4bfa', class: "hero__layer-text" }, "Parallax Layer 01"), h("span", { key: '87d7d56dc8964cfd479e5cfea348424158f6fa7d', class: "hero__layer-sub" }, "depth: 0.3"))));
+    }
+    static get is() { return "luster-hero"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-hero.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-hero.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "''"
+            },
+            "section": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "section",
+                "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": "''"
+            },
+            "parallax": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parallax",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,72 @@
+import { html } from "lit";
+const meta = {
+    title: 'Layout/Hero',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Banner hero de topo de página com suporte a imagem de fundo e parallax. Props: `heading`, `subtitle`, `section`, `image-url`, `parallax`.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        heading: { control: 'text', description: 'Título principal' },
+        subtitle: { control: 'text', description: 'Subtítulo / descrição' },
+        section: { control: 'text', description: 'Rótulo de seção acima do título' },
+        imageUrl: { control: 'text', description: 'URL da imagem de fundo' },
+        parallax: {
+            control: 'boolean',
+            description: 'Ativa indicador de camada parallax',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        heading: 'Design without limits',
+        subtitle: 'An editorial design system built for modern publishing teams.',
+        section: 'FOUNDATIONS',
+        imageUrl: '',
+        parallax: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-hero
+    heading="${args.heading}"
+    subtitle="${args.subtitle}"
+    section="${args.section}"
+    image-url="${args.imageUrl}"
+    ?parallax="${args.parallax}"
+  >
+    <luster-button variant="primary">Get Started</luster-button>
+    <luster-button variant="secondary">View Docs</luster-button>
+  </luster-hero>
+`;
+export const Default = { render };
+export const WithParallax = {
+    name: 'With Parallax Badge',
+    args: { parallax: true },
+    render,
+};
+export const MinimalHero = {
+    name: 'Minimal',
+    args: { section: '', subtitle: '' },
+    render,
+};
+export const FullPage = {
+    name: 'Full Page Layout',
+    render: () => html `
+    <div>
+      <luster-navbar></luster-navbar>
+      <luster-hero
+        heading="The Digital Curator"
+        subtitle="Editorial-first Web Components built for modern publishing."
+        section="DESIGN SYSTEM"
+        ?parallax="${true}"
+      >
+        <luster-button variant="primary">Explore Components</luster-button>
+        <luster-button variant="secondary">Read Docs</luster-button>
+      </luster-hero>
+    </div>
+  `,
+};

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

@@ -0,0 +1,72 @@
+:host {
+  display: block;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-2);
+}
+
+.input__label {
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-label-md);
+  font-weight: 600;
+  color: var(--dc-on-surface-variant);
+  letter-spacing: var(--dc-tracking-wide);
+  text-transform: uppercase;
+}
+
+.input__field-box {
+  position: relative;
+  border-radius: var(--dc-round-2);
+  border: 1px solid var(--dc-border-faint);
+  background: var(--dc-surface-container-lowest);
+  transition: border-color var(--dc-transition-base), box-shadow var(--dc-transition-base);
+  overflow: hidden;
+}
+
+.input-wrapper--focused .input__field-box {
+  border-color: var(--dc-primary);
+  box-shadow: 0 0 0 3px var(--dc-focus-ring);
+}
+
+.input-wrapper--error .input__field-box {
+  border-color: var(--dc-error);
+  box-shadow: 0 0 0 3px var(--dc-error-focus-ring);
+}
+
+.input-wrapper--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.input__field {
+  display: block;
+  width: 100%;
+  padding: var(--dc-space-2) var(--dc-space-4);
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--dc-on-surface);
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-body-md);
+  height: 44px;
+}
+
+.input__field::placeholder {
+  color: var(--dc-on-surface-variant);
+  opacity: 0.6;
+}
+
+.input__message {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-1);
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.input__message--error {
+  color: var(--dc-error);
+}