@luster-ui/ui 1.0.0

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

@@ -0,0 +1,194 @@
+import { h } from "@stencil/core";
+export class DcProfileCard {
+    constructor() {
+        this.name = '';
+        this.role = '';
+        this.avatar = '';
+        this.stat1Value = '';
+        this.stat1Label = '';
+        this.stat2Value = '';
+        this.stat2Label = '';
+        this.ctaLabel = 'View Portfolio';
+    }
+    render() {
+        return (h("div", { key: '69a8fff167fee4805499b3bb754d286c2287413b', class: "profile-card" }, h("div", { key: 'd2547d0cec607d9d001b3074f69557f06d863e3d', class: "profile-card__avatar" }, this.avatar
+            ? h("img", { src: this.avatar, alt: this.name, class: "profile-card__avatar-img" })
+            : h("span", { class: "profile-card__avatar-initials" }, this.name.split(' ').map(n => n[0]).join('').slice(0, 2))), h("div", { key: '22f74d3a2982647a4fcfb807fb8ece81a59d2b9c', class: "profile-card__info" }, h("h3", { key: '06d8567c4c4be29e3653d39357fbf0235a907303', class: "profile-card__name" }, this.name), h("span", { key: '9e8500c7a3d5ee6c895d6209c067c9441dce7d2f', class: "profile-card__role" }, this.role)), (this.stat1Value || this.stat2Value) && (h("div", { key: '5dd61dcd4d290b140e50de1bf4ca3befb81d6f3a', class: "profile-card__stats" }, this.stat1Value && (h("div", { key: '2c972fdc9dd621540e7d7fc572df27bb61fef70a', class: "profile-card__stat" }, h("span", { key: '9693a5bb68e674a3c21681c8ba4b99ca12bf934c', class: "profile-card__stat-value" }, this.stat1Value), h("span", { key: 'ece29d1b9fdc7ebdc4461298bcae931f6d83e8ed', class: "profile-card__stat-label" }, this.stat1Label))), this.stat2Value && (h("div", { key: '211198eda038b08f6093289b7f97c8d5fdac6b6e', class: "profile-card__stat" }, h("span", { key: 'ce84623aeeed41e2b48f0e50a10b4b633fd5b246', class: "profile-card__stat-value" }, this.stat2Value), h("span", { key: 'dcfad2516563bdef51e37623a8fd3c474bea40a6', class: "profile-card__stat-label" }, this.stat2Label))))), h("luster-button", { key: '5de015471f6e29cc283aef60bb7097ec384b3b15', variant: "primary", "full-width": true }, this.ctaLabel)));
+    }
+    static get is() { return "luster-profile-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-profile-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-profile-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "role",
+                "defaultValue": "''"
+            },
+            "avatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar",
+                "defaultValue": "''"
+            },
+            "stat1Value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stat-1-value",
+                "defaultValue": "''"
+            },
+            "stat1Label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stat-1-label",
+                "defaultValue": "''"
+            },
+            "stat2Value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stat-2-value",
+                "defaultValue": "''"
+            },
+            "stat2Label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stat-2-label",
+                "defaultValue": "''"
+            },
+            "ctaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cta-label",
+                "defaultValue": "'View Portfolio'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,56 @@
+import { html } from "lit";
+const meta = {
+    title: 'Cards/Profile Card',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Cartão de perfil de usuário com avatar, estatísticas e CTA. Props: `name`, `role`, `avatar`, `stat1-value`, `stat1-label`, `stat2-value`, `stat2-label`, `cta-label`.',
+            },
+        },
+    },
+    argTypes: {
+        name: { control: 'text', description: 'Nome do usuário' },
+        role: { control: 'text', description: 'Cargo / função' },
+        avatar: { control: 'text', description: 'URL do avatar (vazio = iniciais)' },
+        stat1Value: { control: 'text', description: 'Valor da estatística 1' },
+        stat1Label: { control: 'text', description: 'Label da estatística 1' },
+        stat2Value: { control: 'text', description: 'Valor da estatística 2' },
+        stat2Label: { control: 'text', description: 'Label da estatística 2' },
+        ctaLabel: { control: 'text', description: 'Label do botão CTA' },
+    },
+    args: {
+        name: 'Alex Curator',
+        role: 'Lead Editor',
+        avatar: '',
+        stat1Value: '142',
+        stat1Label: 'Articles',
+        stat2Value: '4.9k',
+        stat2Label: 'Followers',
+        ctaLabel: 'View Portfolio',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-profile-card
+    name="${args.name}"
+    role="${args.role}"
+    avatar="${args.avatar}"
+    stat1-value="${args.stat1Value}"
+    stat1-label="${args.stat1Label}"
+    stat2-value="${args.stat2Value}"
+    stat2-label="${args.stat2Label}"
+    cta-label="${args.ctaLabel}"
+  ></luster-profile-card>
+`;
+export const Default = { render };
+export const NoStats = {
+    name: 'No Stats',
+    args: { stat1Value: '', stat2Value: '' },
+    render,
+};
+export const CustomCTA = {
+    name: 'Custom CTA',
+    args: { ctaLabel: 'Message Alex', name: 'Alex Vieira', role: 'Design Engineer' },
+    render,
+};

package/dist/collection/components/luster-resource-table/luster-resource-table.css

@@ -0,0 +1,141 @@
+:host { display: block; }
+
+.resource-table {
+  background: var(--dc-surface-container-high);
+  border-radius: var(--dc-round-4);
+  overflow: hidden;
+}
+
+.resource-table__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dc-space-4) var(--dc-space-6);
+  border-bottom: 1px solid var(--dc-border-faint);
+}
+
+.resource-table__section-label {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-title-sm);
+  font-weight: 700;
+  color: var(--dc-on-surface);
+}
+
+.resource-table__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+}
+
+.resource-table__filter-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+  padding: var(--dc-space-1) var(--dc-space-3);
+  background: var(--dc-close-bg);
+  border: 1px solid var(--dc-border-medium);
+  border-radius: var(--dc-round-2);
+  color: var(--dc-on-surface-variant);
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-label-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--dc-transition-fast);
+}
+
+.resource-table__filter-btn:hover { background: var(--dc-close-hover); color: var(--dc-on-surface); }
+
+.resource-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.resource-table__th {
+  padding: var(--dc-space-3) var(--dc-space-6);
+  text-align: left;
+  font-size: var(--dc-label-sm);
+  font-weight: 700;
+  color: var(--dc-on-surface-variant);
+  letter-spacing: var(--dc-tracking-wide);
+  text-transform: uppercase;
+  background: var(--dc-surface-container);
+}
+
+.resource-table__row {
+  transition: background var(--dc-transition-fast);
+  border-bottom: 1px solid var(--dc-divider);
+}
+
+.resource-table__row:hover { background: var(--dc-hover-tint); }
+.resource-table__row:last-child { border-bottom: none; }
+
+.resource-table__td {
+  padding: var(--dc-space-3) var(--dc-space-6);
+  vertical-align: middle;
+}
+
+.resource-table__name-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+}
+
+.resource-table__row-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--dc-round-2);
+  background: var(--dc-icon-bg);
+  flex-shrink: 0;
+}
+
+.resource-table__name {
+  font-size: var(--dc-body-sm);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+}
+
+.resource-table__category {
+  font-size: var(--dc-body-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.score-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+}
+
+.score-bar__track {
+  flex: 1;
+  height: 4px;
+  background: var(--dc-close-hover);
+  border-radius: var(--dc-round-full);
+  overflow: hidden;
+  min-width: 80px;
+}
+
+.score-bar__fill {
+  height: 100%;
+  border-radius: var(--dc-round-full);
+  transition: width var(--dc-transition-slow);
+}
+
+.score-bar__label {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+  min-width: 24px;
+}
+
+.resource-table__action-btn {
+  background: none;
+  border: none;
+  color: var(--dc-on-surface-variant);
+  cursor: pointer;
+  padding: var(--dc-space-1);
+  border-radius: var(--dc-round-2);
+  display: flex;
+  align-items: center;
+  transition: all var(--dc-transition-fast);
+}
+
+.resource-table__action-btn:hover { background: var(--dc-hover-tint-icon-md); color: var(--dc-on-surface); }

package/dist/collection/components/luster-resource-table/luster-resource-table.js

@@ -0,0 +1,78 @@
+import { h } from "@stencil/core";
+export class DcResourceTable {
+    constructor() {
+        this.rows = '[]';
+        this.parsedRows = [];
+    }
+    componentWillLoad() {
+        if (typeof this.rows === 'string') {
+            try {
+                this.parsedRows = JSON.parse(this.rows);
+            }
+            catch (_a) {
+                this.parsedRows = [];
+            }
+        }
+        else {
+            this.parsedRows = this.rows;
+        }
+    }
+    getStatusVariant(status) {
+        if (status === 'active')
+            return 'success';
+        if (status === 'stable')
+            return 'primary';
+        if (status === 'beta')
+            return 'beta';
+        return 'error';
+    }
+    renderScoreBar(score) {
+        const color = score >= 80 ? 'var(--dc-primary)' : score >= 50 ? 'var(--dc-warning)' : 'var(--dc-error)';
+        return (h("div", { class: "score-bar" }, h("div", { class: "score-bar__track" }, h("div", { class: "score-bar__fill", style: { width: `${score}%`, background: color } })), h("span", { class: "score-bar__label" }, score)));
+    }
+    render() {
+        return (h("div", { key: '6bdeb9b52ef5582e7f0e8c393c9227c80f84f008', class: "resource-table" }, h("div", { key: 'e0487a74bad62fa8b102dff89a0830a5699b5ed0', class: "resource-table__header" }, h("span", { key: '569ff5a31ce8851b717d860cac1572a2276b4570', class: "resource-table__section-label" }, "Resource Registry"), h("div", { key: '1188c11c3ac56f061e7b8e429ca4124cf4eb9003', class: "resource-table__actions" }, h("button", { key: '6918269ebfdc7036de0f215af7917f6c4fd30fef', class: "resource-table__filter-btn" }, h("svg", { key: 'df3013ce155e854c73e119b4cb6460a64dc8c745', width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("polygon", { key: '8c6e8e05f16f1ae2381ea5854cfbe895d649b50c', points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3", stroke: "currentColor", "stroke-width": "2", "stroke-linejoin": "round" })), "Filter"), h("luster-button", { key: '8f279527c0c382383606b8adc630fd073d1a0228', variant: "primary", size: "sm" }, h("svg", { key: '9084bef4d4a7c36a65ec2ad638e8ac2306fe9e8b', width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("line", { key: 'f0fe5080bf336f57543d7c2674c89133799c446e', x1: "12", y1: "5", x2: "12", y2: "19", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" }), h("line", { key: '2ba13c955df243e207f23412fd83711d739bd7c7', x1: "5", y1: "12", x2: "19", y2: "12", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })), "New Resource"))), h("table", { key: 'babbd76b01ed435059b1aa464bfb8b18d232b055', class: "resource-table__table" }, h("thead", { key: 'c4c6c3da19b5fc1ffd6054972d5984559e91ba21' }, h("tr", { key: '99ef959a0097257388338bd19fdd5bc5c3034135' }, h("th", { key: '4620f3a90752404ed11a6b0fb5bd61b46593bdc6', class: "resource-table__th" }, "Resource Name"), h("th", { key: '56a8d39b968cb1792df91eb33a15f52e25b5f033', class: "resource-table__th" }, "Category"), h("th", { key: '2f73489d579a24238ff62bccd275869afcf5ca5e', class: "resource-table__th" }, "Status"), h("th", { key: '6bacb56a5f7243da34c64da024aee65eadf86183', class: "resource-table__th" }, "Score"), h("th", { key: '7a0d111e4a20b1d249343c3b0f7c5a1125aff7eb', class: "resource-table__th" }, "Actions"))), h("tbody", { key: '86dbffb47088aac4ca6f549e5813c3cab148419a' }, this.parsedRows.map((row, i) => (h("tr", { key: i, class: "resource-table__row" }, h("td", { class: "resource-table__td resource-table__td--name" }, h("div", { class: "resource-table__name-cell" }, h("div", { class: "resource-table__row-icon" }), h("span", { class: "resource-table__name" }, row.name))), h("td", { class: "resource-table__td" }, h("span", { class: "resource-table__category" }, row.category)), h("td", { class: "resource-table__td" }, h("luster-badge", { variant: this.getStatusVariant(row.status), dot: true }, row.status.charAt(0).toUpperCase() + row.status.slice(1))), h("td", { class: "resource-table__td" }, this.renderScoreBar(row.score)), h("td", { class: "resource-table__td" }, h("button", { class: "resource-table__action-btn", "aria-label": "More actions" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor" }), h("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" }), h("circle", { cx: "12", cy: "19", r: "1.5", fill: "currentColor" })))))))))));
+    }
+    static get is() { return "luster-resource-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-resource-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-resource-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "rows": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ResourceRow[] | string",
+                    "resolved": "ResourceRow[] | string",
+                    "references": {
+                        "ResourceRow": {
+                            "location": "local",
+                            "path": "C:/Users/vieir/Documents/estudos/luster/stencil-ds/src/components/luster-resource-table/luster-resource-table.tsx",
+                            "id": "src/components/luster-resource-table/luster-resource-table.tsx::ResourceRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "'[]'"
+            }
+        };
+    }
+}

package/dist/collection/components/luster-resource-table/luster-resource-table.stories.js

@@ -0,0 +1,44 @@
+import { html } from "lit";
+const sampleRows = JSON.stringify([
+    { name: 'luster-button', category: 'Interaction', status: 'active', score: 98 },
+    { name: 'luster-input', category: 'Form', status: 'active', score: 95 },
+    { name: 'luster-modal', category: 'Overlay', status: 'active', score: 88 },
+    { name: 'luster-hero', category: 'Layout', status: 'beta', score: 72 },
+    { name: 'luster-tabs', category: 'Navigation', status: 'stable', score: 91 },
+    { name: 'luster-accordion', category: 'Disclosure', status: 'active', score: 85 },
+    { name: 'dc-button', category: 'Legacy', status: 'deprecated', score: 20 },
+]);
+const meta = {
+    title: 'Cards/Resource Table',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Tabela de registro de recursos com status, categoria e score de qualidade. Props: `rows` (JSON array).',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        rows: {
+            control: 'text',
+            description: 'Array JSON de linhas: `[{name, category, status, score}]`',
+        },
+    },
+    args: { rows: sampleRows },
+};
+export default meta;
+const render = (args) => html `
+  <luster-resource-table rows="${args.rows}"></luster-resource-table>
+`;
+export const Default = { render };
+export const ShortList = {
+    name: 'Short List',
+    args: {
+        rows: JSON.stringify([
+            { name: 'luster-badge', category: 'Display', status: 'active', score: 100 },
+            { name: 'luster-toggle', category: 'Form', status: 'active', score: 96 },
+        ]),
+    },
+    render,
+};

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

@@ -0,0 +1,152 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 196px;
+  min-width: 196px;
+  background: var(--dc-surface-container-low);
+  height: 100%;
+  overflow: hidden;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--dc-space-4) 0;
+}
+
+.sidebar__nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 var(--dc-space-3);
+  overflow-y: auto;
+}
+
+.sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+  padding: var(--dc-space-2) var(--dc-space-3);
+  border-radius: var(--dc-round-2);
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--dc-on-surface-variant);
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-body-md);
+  font-weight: 500;
+  transition: all var(--dc-transition-fast);
+  line-height: 1.3;
+}
+
+.sidebar__item:hover {
+  background: var(--dc-hover-tint-md);
+  color: var(--dc-on-surface);
+}
+
+.sidebar__item--active {
+  background: var(--dc-focus-ring);
+  color: var(--dc-primary);
+}
+
+.sidebar__item--active .sidebar__icon {
+  color: var(--dc-primary);
+}
+
+.sidebar__item--sm {
+  padding: var(--dc-space-1) var(--dc-space-3);
+  font-size: var(--dc-label-md);
+}
+
+.sidebar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.sidebar__label {
+  line-height: 1.2;
+}
+
+.sidebar__bottom {
+  padding: var(--dc-space-3) var(--dc-space-3) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-2);
+  border-top: 1px solid var(--dc-border-default);
+  margin-top: var(--dc-space-3);
+}
+
+.sidebar__new-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dc-space-2);
+  padding: var(--dc-space-2) var(--dc-space-3);
+  background: var(--dc-hover-tint-strong);
+  border: 1px solid var(--dc-focus-ring);
+  border-radius: var(--dc-round-2);
+  color: var(--dc-primary);
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-label-md);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--dc-transition-fast);
+  width: 100%;
+}
+
+.sidebar__new-btn:hover {
+  background: var(--dc-hover-tint-strong);
+  border-color: var(--dc-focus-ring-hover);
+}
+
+.sidebar__footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar__user {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+  padding: var(--dc-space-2) 0 var(--dc-space-2) var(--dc-space-1);
+}
+
+.sidebar__user-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-size: 10px;
+  font-weight: 700;
+  color: var(--dc-on-primary);
+  flex-shrink: 0;
+}
+
+.sidebar__user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  overflow: hidden;
+}
+
+.sidebar__user-name {
+  font-size: var(--dc-label-md);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar__user-role {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+}