@luster-ui/ui 1.0.0

package/dist/cjs/luster-card.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-Couc0LVo.js');
+
+const lusterCardCss = () => `:host{display:block}.card{border-radius:var(--dc-round-4);overflow:hidden;transition:background var(--dc-transition-base), box-shadow var(--dc-transition-base)}.card--pad-none{padding:0}.card--pad-sm{padding:var(--dc-space-4)}.card--pad-md{padding:var(--dc-space-6)}.card--pad-lg{padding:var(--dc-space-8)}.card--default{background:var(--dc-surface-container-high)}.card--elevated{background:var(--dc-surface-container-highest);box-shadow:var(--dc-shadow-md)}.card--feature{background:var(--dc-surface-container-high);border:1px solid var(--dc-border-default)}.card--glass{background:var(--dc-glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--dc-border-default)}.card--hoverable{cursor:pointer}.card--hoverable:hover{background:var(--dc-surface-bright);box-shadow:var(--dc-shadow-lg)}`;
+
+const DcCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'default';
+        this.padding = 'md';
+        this.hoverable = false;
+    }
+    render() {
+        return (index.h("div", { key: 'b49300a94d3ec06822794698af4a1d8da248d319', class: [
+                'card',
+                `card--${this.variant}`,
+                `card--pad-${this.padding}`,
+                this.hoverable ? 'card--hoverable' : '',
+            ].filter(Boolean).join(' ') }, index.h("slot", { key: '05c26e4626e0610588ab6694355f315b0adc9327' })));
+    }
+};
+DcCard.style = lusterCardCss();
+
+exports.luster_card = DcCard;

package/dist/cjs/luster.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-Couc0LVo.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('luster.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["luster-card.cjs",[[257,"luster-card",{"variant":[1],"padding":[1],"hoverable":[4]}]]],["luster-accordion_19.cjs",[[1,"luster-resource-table",{"rows":[1]}],[1,"luster-stat-card",{"heading":[1],"description":[1],"version":[1],"status":[1],"users":[1],"hasToggle":[4,"has-toggle"],"toggleOn":[4,"toggle-on"],"icon":[1]}],[257,"luster-accordion",{"heading":[1],"subtitle":[1],"badge":[1],"badgeVariant":[1,"badge-variant"],"expanded":[1028],"isExpanded":[32]}],[257,"luster-modal",{"open":[1028],"heading":[1],"subtitle":[1],"confirmLabel":[1,"confirm-label"],"cancelLabel":[1,"cancel-label"],"size":[1],"visible":[32]},null,{"open":[{"watchOpen":0}]}],[1,"luster-profile-card",{"name":[1],"role":[1],"avatar":[1],"stat1Value":[1,"stat-1-value"],"stat1Label":[1,"stat-1-label"],"stat2Value":[1,"stat-2-value"],"stat2Label":[1,"stat-2-label"],"ctaLabel":[1,"cta-label"]}],[1,"luster-activity-item",{"label":[1],"description":[1],"time":[1],"variant":[1],"icon":[1],"fileSize":[1,"file-size"],"downloadable":[4]}],[1,"luster-alert",{"heading":[1],"message":[1],"variant":[1],"dismissible":[4],"timestamp":[1],"visible":[32]}],[1,"luster-article-card",{"category":[1],"heading":[1],"excerpt":[1],"date":[1],"author":[1],"authorRole":[1,"author-role"],"imageUrl":[1,"image-url"],"featured":[4]}],[1,"luster-checkbox",{"label":[1],"checked":[4],"disabled":[4],"indeterminate":[4],"value":[1],"innerChecked":[32]}],[1,"luster-color-swatch",{"color":[1],"name":[1],"hex":[1],"size":[1]}],[257,"luster-feature-quote",{"quote":[1],"author":[1],"role":[1],"variant":[1]}],[257,"luster-hero",{"heading":[1],"subtitle":[1],"section":[1],"imageUrl":[1,"image-url"],"parallax":[4]}],[1,"luster-input",{"label":[1],"placeholder":[1],"value":[1],"type":[1],"error":[4],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"disabled":[4],"readonly":[4],"name":[1],"focused":[32],"innerValue":[32]}],[1,"luster-navbar",{"logoTitle":[1,"logo-title"],"logoSub":[1,"logo-sub"],"activeLink":[1,"active-link"]}],[1,"luster-sidebar",{"active":[1]}],[257,"luster-tabs",{"tabs":[1],"active":[1],"activeTab":[32]}],[1,"luster-toggle",{"label":[1],"checked":[4],"disabled":[4],"innerChecked":[32]}],[257,"luster-badge",{"variant":[1],"dot":[4],"size":[1]}],[257,"luster-button",{"variant":[1],"size":[1],"disabled":[4],"loading":[4],"fullWidth":[4,"full-width"],"type":[1]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,32 @@
+{
+  "entries": [
+    "components/luster-resource-table/luster-resource-table.js",
+    "components/luster-tabs/luster-tabs.js",
+    "components/luster-accordion/luster-accordion.js",
+    "components/luster-activity-item/luster-activity-item.js",
+    "components/luster-alert/luster-alert.js",
+    "components/luster-article-card/luster-article-card.js",
+    "components/luster-badge/luster-badge.js",
+    "components/luster-button/luster-button.js",
+    "components/luster-card/luster-card.js",
+    "components/luster-checkbox/luster-checkbox.js",
+    "components/luster-color-swatch/luster-color-swatch.js",
+    "components/luster-feature-quote/luster-feature-quote.js",
+    "components/luster-hero/luster-hero.js",
+    "components/luster-input/luster-input.js",
+    "components/luster-modal/luster-modal.js",
+    "components/luster-navbar/luster-navbar.js",
+    "components/luster-profile-card/luster-profile-card.js",
+    "components/luster-sidebar/luster-sidebar.js",
+    "components/luster-stat-card/luster-stat-card.js",
+    "components/luster-toggle/luster-toggle.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,76 @@
+:host { display: block; }
+
+.accordion {
+  background: var(--dc-surface-container-high);
+  border-radius: var(--dc-round-3);
+  overflow: hidden;
+  transition: box-shadow var(--dc-transition-base);
+}
+
+.accordion--expanded {
+  box-shadow: var(--dc-shadow-sm);
+}
+
+.accordion__trigger {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--dc-space-4);
+  width: 100%;
+  padding: var(--dc-space-4) var(--dc-space-5);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--dc-transition-fast);
+}
+
+.accordion__trigger:hover { background: var(--dc-hover-tint); }
+
+.accordion__trigger-left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-2);
+  flex: 1;
+}
+
+.accordion__titles { display: flex; flex-direction: column; gap: 4px; }
+
+.accordion__title {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-title-sm);
+  font-weight: 700;
+  color: var(--dc-on-surface);
+}
+
+.accordion__subtitle {
+  font-size: var(--dc-body-sm);
+  color: var(--dc-on-surface-variant);
+  line-height: 1.5;
+}
+
+.accordion__chevron {
+  color: var(--dc-on-surface-variant);
+  display: flex;
+  align-items: center;
+  transition: transform var(--dc-transition-base);
+  flex-shrink: 0;
+  margin-top: var(--dc-space-1);
+}
+
+.accordion__chevron--up { transform: rotate(180deg); }
+
+.accordion__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--dc-transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.accordion--expanded .accordion__content { max-height: 600px; }
+
+.accordion__inner {
+  padding: 0 var(--dc-space-5) var(--dc-space-5);
+  color: var(--dc-on-surface-variant);
+  font-size: var(--dc-body-sm);
+  line-height: 1.6;
+}

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

@@ -0,0 +1,160 @@
+import { h } from "@stencil/core";
+export class DcAccordion {
+    constructor() {
+        this.heading = '';
+        this.subtitle = '';
+        this.badge = '';
+        this.badgeVariant = 'default';
+        this.expanded = false;
+        this.isExpanded = false;
+        this.handleToggle = () => {
+            this.isExpanded = !this.isExpanded;
+            this.dcToggle.emit(this.isExpanded);
+        };
+    }
+    componentWillLoad() {
+        this.isExpanded = this.expanded;
+    }
+    render() {
+        return (h("div", { key: '8354addfd70119cc5c50b0cadb414d341f5c4dd1', class: `accordion ${this.isExpanded ? 'accordion--expanded' : ''}` }, h("button", { key: 'bffcbfdef833e817b8e03c79fa72b5a5a4edbbb0', class: "accordion__trigger", onClick: this.handleToggle, "aria-expanded": this.isExpanded ? 'true' : 'false' }, h("div", { key: '5b6e51d9e0eabb125b50b54ebd54667432a672b3', class: "accordion__trigger-left" }, this.badge && (h("luster-badge", { key: '1894640145ac7ab6df3867b9710e475573c99b5b', variant: this.badgeVariant, size: "sm" }, this.badge)), h("div", { key: '30e6782a85ceec036d91b12c936c5c2863a4f017', class: "accordion__titles" }, h("span", { key: '7c7bf525077ba806efb13ddee674a6049af64204', class: "accordion__title" }, this.heading), this.subtitle && (h("span", { key: 'd888d5b78704713aa1c4c9cc902dbd04979503e2', class: "accordion__subtitle" }, this.subtitle)))), h("span", { key: '98601396b5fcd1d777935d400a1f01072c9d437a', class: `accordion__chevron ${this.isExpanded ? 'accordion__chevron--up' : ''}` }, h("svg", { key: '5c9c4af605307d12973f82c5166d8e3873e402c3', width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'd59e9cc24f98cdd87c317f3107b34ba9c732b3af', points: "6,9 12,15 18,9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '3b7245e52cc48797637756d8ec66bcf1868adfe4', class: "accordion__content", "aria-hidden": !this.isExpanded ? 'true' : 'false' }, h("div", { key: 'ab1069f5ab0d102b16fc02ef71365c4cd4525af8', class: "accordion__inner" }, h("slot", { key: 'cfc15924e2effa62732dd221d846f44baeff0901' })))));
+    }
+    static get is() { return "luster-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-accordion.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": "''"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "''"
+            },
+            "badgeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'default' | 'success' | 'beta'",
+                    "resolved": "\"beta\" | \"default\" | \"primary\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-variant",
+                "defaultValue": "'default'"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dcToggle",
+                "name": "dcToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,88 @@
+import { html } from "lit";
+const meta = {
+    title: 'Navigation/Accordion',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Painel expansível com badge e subtítulo. Props: `heading`, `subtitle`, `badge`, `badge-variant`, `expanded`.',
+            },
+        },
+    },
+    argTypes: {
+        heading: { control: 'text', description: 'Título do accordion' },
+        subtitle: { control: 'text', description: 'Subtítulo exibido sob o título' },
+        badge: { control: 'text', description: 'Texto do badge (vazio = sem badge)' },
+        badgeVariant: {
+            control: 'select',
+            options: ['default', 'primary', 'success', 'beta'],
+            description: 'Variante do badge',
+            table: { defaultValue: { summary: 'default' } },
+        },
+        expanded: {
+            control: 'boolean',
+            description: 'Estado inicial expandido',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        heading: 'Typography System',
+        subtitle: 'Fonts, sizes, weights and line heights',
+        badge: 'v1.2',
+        badgeVariant: 'default',
+        expanded: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-accordion
+    heading="${args.heading}"
+    subtitle="${args.subtitle}"
+    badge="${args.badge}"
+    badge-variant="${args.badgeVariant}"
+    ?expanded="${args.expanded}"
+  >
+    <div style="color:var(--dc-on-surface-variant);font-size:0.875rem;line-height:1.6;">
+      Content inside the accordion panel. Add any components or text here.
+    </div>
+  </luster-accordion>
+`;
+export const Collapsed = {
+    args: { expanded: false },
+    render,
+};
+export const Expanded = {
+    args: { expanded: true },
+    render,
+};
+export const WithPrimaryBadge = {
+    name: 'Primary Badge',
+    args: { badge: 'New', badgeVariant: 'primary', expanded: true },
+    render,
+};
+export const WithBetaBadge = {
+    name: 'Beta Badge',
+    args: { badge: 'Beta', badgeVariant: 'beta' },
+    render,
+};
+export const NoSubtitle = {
+    name: 'No Subtitle',
+    args: { subtitle: '', badge: '' },
+    render,
+};
+export const StackedGroup = {
+    name: 'Stacked Group',
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:0.5rem;width:520px;">
+      <luster-accordion heading="Typography" subtitle="Fonts and type scale" badge="v1.2" ?expanded="${true}">
+        <p style="color:var(--dc-on-surface-variant);margin:0;font-size:0.875rem;">Manrope for headings, Inter for body text.</p>
+      </luster-accordion>
+      <luster-accordion heading="Color Tokens" subtitle="Surfaces, primaries, semantic" badge="v2.0" badge-variant="primary">
+        <p style="color:var(--dc-on-surface-variant);margin:0;font-size:0.875rem;">All tokens defined as CSS custom properties on :root.</p>
+      </luster-accordion>
+      <luster-accordion heading="Spacing System" subtitle="Scale based on 4px grid" badge="Beta" badge-variant="beta">
+        <p style="color:var(--dc-on-surface-variant);margin:0;font-size:0.875rem;">xs: 4px · sm: 8px · md: 16px · lg: 24px · xl: 40px</p>
+      </luster-accordion>
+    </div>
+  `,
+};

package/dist/collection/components/luster-activity-item/luster-activity-item.css

@@ -0,0 +1,102 @@
+:host { display: block; }
+
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dc-space-3);
+  padding: var(--dc-space-3) 0;
+}
+
+.activity-item + .activity-item { border-top: 1px solid var(--dc-divider); }
+
+.activity-item__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--dc-round-full);
+  background: var(--dc-icon-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dc-primary);
+  flex-shrink: 0;
+}
+
+.activity-item__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.activity-item__title {
+  font-size: var(--dc-body-sm);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+  line-height: 1.3;
+}
+
+.activity-item__desc {
+  font-size: var(--dc-label-md);
+  color: var(--dc-on-surface-variant);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.activity-item__time {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+  margin-top: var(--dc-space-1);
+}
+
+/* File variant */
+.activity-item--file {
+  align-items: center;
+  background: var(--dc-surface-container);
+  border-radius: var(--dc-round-3);
+  padding: var(--dc-space-3) var(--dc-space-4);
+  transition: background var(--dc-transition-fast);
+}
+
+.activity-item--file + .activity-item--file { border-top: none; margin-top: var(--dc-space-2); }
+
+.activity-item--file:hover { background: var(--dc-surface-container-high); }
+
+.activity-item__file-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--dc-round-2);
+  background: var(--dc-icon-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dc-primary);
+  flex-shrink: 0;
+}
+
+.activity-item__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-1);
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.activity-item__download {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--dc-on-surface-variant);
+  display: flex;
+  align-items: center;
+  padding: var(--dc-space-1);
+  border-radius: var(--dc-round-1);
+  flex-shrink: 0;
+  opacity: 0.6;
+  transition: opacity var(--dc-transition-fast);
+}
+
+.activity-item__download:hover { opacity: 1; }