@luster-ui/ui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PUBLISHING.md +469 -0
- package/README.md +423 -0
- package/dist/cjs/index-Couc0LVo.js +1571 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/loader.cjs.js +12 -0
- package/dist/cjs/luster-accordion_19.cjs.entry.js +555 -0
- package/dist/cjs/luster-card.cjs.entry.js +25 -0
- package/dist/cjs/luster.cjs.js +24 -0
- package/dist/collection/collection-manifest.json +32 -0
- package/dist/collection/components/luster-accordion/luster-accordion.css +76 -0
- package/dist/collection/components/luster-accordion/luster-accordion.js +160 -0
- package/dist/collection/components/luster-accordion/luster-accordion.stories.js +88 -0
- package/dist/collection/components/luster-activity-item/luster-activity-item.css +102 -0
- package/dist/collection/components/luster-activity-item/luster-activity-item.js +188 -0
- package/dist/collection/components/luster-activity-item/luster-activity-item.stories.js +94 -0
- package/dist/collection/components/luster-alert/luster-alert.css +71 -0
- package/dist/collection/components/luster-alert/luster-alert.js +171 -0
- package/dist/collection/components/luster-alert/luster-alert.stories.js +82 -0
- package/dist/collection/components/luster-article-card/luster-article-card.css +120 -0
- package/dist/collection/components/luster-article-card/luster-article-card.js +192 -0
- package/dist/collection/components/luster-article-card/luster-article-card.stories.js +82 -0
- package/dist/collection/components/luster-badge/luster-badge.css +38 -0
- package/dist/collection/components/luster-badge/luster-badge.js +87 -0
- package/dist/collection/components/luster-badge/luster-badge.stories.js +86 -0
- package/dist/collection/components/luster-button/luster-button.css +121 -0
- package/dist/collection/components/luster-button/luster-button.js +179 -0
- package/dist/collection/components/luster-button/luster-button.stories.js +103 -0
- package/dist/collection/components/luster-card/luster-card.css +29 -0
- package/dist/collection/components/luster-card/luster-card.js +92 -0
- package/dist/collection/components/luster-card/luster-card.stories.js +67 -0
- package/dist/collection/components/luster-checkbox/luster-checkbox.css +42 -0
- package/dist/collection/components/luster-checkbox/luster-checkbox.js +162 -0
- package/dist/collection/components/luster-checkbox/luster-checkbox.stories.js +78 -0
- package/dist/collection/components/luster-color-swatch/luster-color-swatch.css +33 -0
- package/dist/collection/components/luster-color-swatch/luster-color-swatch.js +108 -0
- package/dist/collection/components/luster-color-swatch/luster-color-swatch.stories.js +58 -0
- package/dist/collection/components/luster-feature-quote/luster-feature-quote.css +84 -0
- package/dist/collection/components/luster-feature-quote/luster-feature-quote.js +108 -0
- package/dist/collection/components/luster-feature-quote/luster-feature-quote.stories.js +52 -0
- package/dist/collection/components/luster-hero/luster-hero.css +119 -0
- package/dist/collection/components/luster-hero/luster-hero.js +129 -0
- package/dist/collection/components/luster-hero/luster-hero.stories.js +72 -0
- package/dist/collection/components/luster-input/luster-input.css +72 -0
- package/dist/collection/components/luster-input/luster-input.js +332 -0
- package/dist/collection/components/luster-input/luster-input.stories.js +106 -0
- package/dist/collection/components/luster-modal/luster-modal.css +103 -0
- package/dist/collection/components/luster-modal/luster-modal.js +215 -0
- package/dist/collection/components/luster-modal/luster-modal.stories.js +78 -0
- package/dist/collection/components/luster-navbar/luster-navbar.css +151 -0
- package/dist/collection/components/luster-navbar/luster-navbar.js +87 -0
- package/dist/collection/components/luster-navbar/luster-navbar.stories.js +41 -0
- package/dist/collection/components/luster-profile-card/luster-profile-card.css +89 -0
- package/dist/collection/components/luster-profile-card/luster-profile-card.js +194 -0
- package/dist/collection/components/luster-profile-card/luster-profile-card.stories.js +56 -0
- package/dist/collection/components/luster-resource-table/luster-resource-table.css +141 -0
- package/dist/collection/components/luster-resource-table/luster-resource-table.js +78 -0
- package/dist/collection/components/luster-resource-table/luster-resource-table.stories.js +44 -0
- package/dist/collection/components/luster-sidebar/luster-sidebar.css +152 -0
- package/dist/collection/components/luster-sidebar/luster-sidebar.js +78 -0
- package/dist/collection/components/luster-sidebar/luster-sidebar.stories.js +34 -0
- package/dist/collection/components/luster-stat-card/luster-stat-card.css +82 -0
- package/dist/collection/components/luster-stat-card/luster-stat-card.js +194 -0
- package/dist/collection/components/luster-stat-card/luster-stat-card.stories.js +75 -0
- package/dist/collection/components/luster-tabs/luster-tabs.css +35 -0
- package/dist/collection/components/luster-tabs/luster-tabs.js +116 -0
- package/dist/collection/components/luster-tabs/luster-tabs.stories.js +56 -0
- package/dist/collection/components/luster-toggle/luster-toggle.css +48 -0
- package/dist/collection/components/luster-toggle/luster-toggle.js +120 -0
- package/dist/collection/components/luster-toggle/luster-toggle.stories.js +66 -0
- package/dist/components/index.d.ts +33 -0
- package/dist/components/index.js +1 -0
- package/dist/components/luster-accordion.d.ts +11 -0
- package/dist/components/luster-accordion.js +1 -0
- package/dist/components/luster-activity-item.d.ts +11 -0
- package/dist/components/luster-activity-item.js +1 -0
- package/dist/components/luster-alert.d.ts +11 -0
- package/dist/components/luster-alert.js +1 -0
- package/dist/components/luster-article-card.d.ts +11 -0
- package/dist/components/luster-article-card.js +1 -0
- package/dist/components/luster-badge.d.ts +11 -0
- package/dist/components/luster-badge.js +1 -0
- package/dist/components/luster-badge2.js +1 -0
- package/dist/components/luster-button.d.ts +11 -0
- package/dist/components/luster-button.js +1 -0
- package/dist/components/luster-button2.js +1 -0
- package/dist/components/luster-card.d.ts +11 -0
- package/dist/components/luster-card.js +1 -0
- package/dist/components/luster-checkbox.d.ts +11 -0
- package/dist/components/luster-checkbox.js +1 -0
- package/dist/components/luster-color-swatch.d.ts +11 -0
- package/dist/components/luster-color-swatch.js +1 -0
- package/dist/components/luster-feature-quote.d.ts +11 -0
- package/dist/components/luster-feature-quote.js +1 -0
- package/dist/components/luster-hero.d.ts +11 -0
- package/dist/components/luster-hero.js +1 -0
- package/dist/components/luster-input.d.ts +11 -0
- package/dist/components/luster-input.js +1 -0
- package/dist/components/luster-modal.d.ts +11 -0
- package/dist/components/luster-modal.js +1 -0
- package/dist/components/luster-navbar.d.ts +11 -0
- package/dist/components/luster-navbar.js +1 -0
- package/dist/components/luster-profile-card.d.ts +11 -0
- package/dist/components/luster-profile-card.js +1 -0
- package/dist/components/luster-resource-table.d.ts +11 -0
- package/dist/components/luster-resource-table.js +1 -0
- package/dist/components/luster-sidebar.d.ts +11 -0
- package/dist/components/luster-sidebar.js +1 -0
- package/dist/components/luster-stat-card.d.ts +11 -0
- package/dist/components/luster-stat-card.js +1 -0
- package/dist/components/luster-tabs.d.ts +11 -0
- package/dist/components/luster-tabs.js +1 -0
- package/dist/components/luster-toggle.d.ts +11 -0
- package/dist/components/luster-toggle.js +1 -0
- package/dist/components/luster-toggle2.js +1 -0
- package/dist/esm/index-CeYIN8dN.js +1563 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/loader.js +10 -0
- package/dist/esm/luster-accordion_19.entry.js +535 -0
- package/dist/esm/luster-card.entry.js +23 -0
- package/dist/esm/luster.js +20 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/luster/index.esm.js +0 -0
- package/dist/luster/luster.css +313 -0
- package/dist/luster/luster.esm.js +1 -0
- package/dist/luster/p-3c4ce897.entry.js +1 -0
- package/dist/luster/p-CeYIN8dN.js +2 -0
- package/dist/luster/p-e368ec08.entry.js +1 -0
- package/dist/types/.stencil/luster-accordion/luster-accordion.d.ts +13 -0
- package/dist/types/.stencil/luster-accordion/luster-accordion.stories.d.ts +10 -0
- package/dist/types/.stencil/luster-activity-item/luster-activity-item.d.ts +11 -0
- package/dist/types/.stencil/luster-activity-item/luster-activity-item.stories.d.ts +9 -0
- package/dist/types/.stencil/luster-alert/luster-alert.d.ts +13 -0
- package/dist/types/.stencil/luster-alert/luster-alert.stories.d.ts +10 -0
- package/dist/types/.stencil/luster-article-card/luster-article-card.d.ts +11 -0
- package/dist/types/.stencil/luster-article-card/luster-article-card.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-badge/luster-badge.d.ts +6 -0
- package/dist/types/.stencil/luster-badge/luster-badge.stories.d.ts +12 -0
- package/dist/types/.stencil/luster-button/luster-button.d.ts +12 -0
- package/dist/types/.stencil/luster-button/luster-button.stories.d.ts +13 -0
- package/dist/types/.stencil/luster-card/luster-card.d.ts +6 -0
- package/dist/types/.stencil/luster-card/luster-card.stories.d.ts +10 -0
- package/dist/types/.stencil/luster-checkbox/luster-checkbox.d.ts +13 -0
- package/dist/types/.stencil/luster-checkbox/luster-checkbox.stories.d.ts +10 -0
- package/dist/types/.stencil/luster-color-swatch/luster-color-swatch.d.ts +7 -0
- package/dist/types/.stencil/luster-color-swatch/luster-color-swatch.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-feature-quote/luster-feature-quote.d.ts +7 -0
- package/dist/types/.stencil/luster-feature-quote/luster-feature-quote.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-hero/luster-hero.d.ts +8 -0
- package/dist/types/.stencil/luster-hero/luster-hero.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-input/luster-input.d.ts +25 -0
- package/dist/types/.stencil/luster-input/luster-input.stories.d.ts +9 -0
- package/dist/types/.stencil/luster-modal/luster-modal.d.ts +17 -0
- package/dist/types/.stencil/luster-modal/luster-modal.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-navbar/luster-navbar.d.ts +6 -0
- package/dist/types/.stencil/luster-navbar/luster-navbar.stories.d.ts +6 -0
- package/dist/types/.stencil/luster-profile-card/luster-profile-card.d.ts +11 -0
- package/dist/types/.stencil/luster-profile-card/luster-profile-card.stories.d.ts +7 -0
- package/dist/types/.stencil/luster-resource-table/luster-resource-table.d.ts +14 -0
- package/dist/types/.stencil/luster-resource-table/luster-resource-table.stories.d.ts +6 -0
- package/dist/types/.stencil/luster-sidebar/luster-sidebar.d.ts +9 -0
- package/dist/types/.stencil/luster-sidebar/luster-sidebar.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-stat-card/luster-stat-card.d.ts +11 -0
- package/dist/types/.stencil/luster-stat-card/luster-stat-card.stories.d.ts +8 -0
- package/dist/types/.stencil/luster-tabs/luster-tabs.d.ts +15 -0
- package/dist/types/.stencil/luster-tabs/luster-tabs.stories.d.ts +7 -0
- package/dist/types/.stencil/luster-toggle/luster-toggle.d.ts +11 -0
- package/dist/types/.stencil/luster-toggle/luster-toggle.stories.d.ts +9 -0
- package/dist/types/components.d.ts +1355 -0
- package/dist/types/stencil-public-runtime.d.ts +1860 -0
- package/loader/cdn.js +1 -0
- package/loader/index.cjs.js +1 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +1 -0
- package/loader/index.js +2 -0
- package/package.json +73 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Navigation/Tabs',
|
|
4
|
+
tags: ['autodocs'],
|
|
5
|
+
parameters: {
|
|
6
|
+
docs: {
|
|
7
|
+
description: {
|
|
8
|
+
component: 'Navegação por abas. Props: `tabs` (JSON string ou array), `active`.',
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
argTypes: {
|
|
13
|
+
tabs: {
|
|
14
|
+
control: 'text',
|
|
15
|
+
description: 'Array de tabs em formato JSON: `[{"label":"...","value":"..."}]`',
|
|
16
|
+
},
|
|
17
|
+
active: {
|
|
18
|
+
control: 'text',
|
|
19
|
+
description: 'Valor da aba ativa',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
args: {
|
|
23
|
+
tabs: JSON.stringify([
|
|
24
|
+
{ label: 'Overview', value: 'overview' },
|
|
25
|
+
{ label: 'Components', value: 'components' },
|
|
26
|
+
{ label: 'Tokens', value: 'tokens' },
|
|
27
|
+
]),
|
|
28
|
+
active: 'overview',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
export default meta;
|
|
32
|
+
const render = (args) => html `
|
|
33
|
+
<luster-tabs tabs="${args.tabs}" active="${args.active}"></luster-tabs>
|
|
34
|
+
`;
|
|
35
|
+
export const Default = {
|
|
36
|
+
render,
|
|
37
|
+
};
|
|
38
|
+
export const SecondActive = {
|
|
39
|
+
name: 'Second Tab Active',
|
|
40
|
+
args: { active: 'components' },
|
|
41
|
+
render,
|
|
42
|
+
};
|
|
43
|
+
export const ManyTabs = {
|
|
44
|
+
name: 'Many Tabs',
|
|
45
|
+
args: {
|
|
46
|
+
tabs: JSON.stringify([
|
|
47
|
+
{ label: 'Design', value: 'design' },
|
|
48
|
+
{ label: 'Code', value: 'code' },
|
|
49
|
+
{ label: 'Preview', value: 'preview' },
|
|
50
|
+
{ label: 'Changelog', value: 'changelog' },
|
|
51
|
+
{ label: 'Usage', value: 'usage' },
|
|
52
|
+
]),
|
|
53
|
+
active: 'design',
|
|
54
|
+
},
|
|
55
|
+
render,
|
|
56
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
:host { display: inline-flex; }
|
|
2
|
+
|
|
3
|
+
.toggle {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: var(--dc-space-3);
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.toggle--disabled { opacity: 0.4; cursor: not-allowed; }
|
|
11
|
+
|
|
12
|
+
.toggle__label {
|
|
13
|
+
font-size: var(--dc-body-md);
|
|
14
|
+
color: var(--dc-on-surface);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.toggle__track {
|
|
18
|
+
position: relative;
|
|
19
|
+
width: 40px;
|
|
20
|
+
height: 22px;
|
|
21
|
+
border-radius: var(--dc-round-full);
|
|
22
|
+
background: var(--dc-border-strong);
|
|
23
|
+
border: none;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
transition: background var(--dc-transition-base);
|
|
26
|
+
padding: 0;
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.toggle__track--on {
|
|
31
|
+
background: var(--dc-primary-dim);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.toggle__thumb {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 3px;
|
|
37
|
+
left: 3px;
|
|
38
|
+
width: 16px;
|
|
39
|
+
height: 16px;
|
|
40
|
+
border-radius: var(--dc-round-full);
|
|
41
|
+
background: white;
|
|
42
|
+
transition: transform var(--dc-transition-base);
|
|
43
|
+
display: block;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.toggle__track--on .toggle__thumb {
|
|
47
|
+
transform: translateX(18px);
|
|
48
|
+
}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
export class DcToggle {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.label = '';
|
|
5
|
+
this.checked = false;
|
|
6
|
+
this.disabled = false;
|
|
7
|
+
this.innerChecked = false;
|
|
8
|
+
this.handleToggle = () => {
|
|
9
|
+
if (!this.disabled) {
|
|
10
|
+
this.innerChecked = !this.innerChecked;
|
|
11
|
+
this.dcChange.emit(this.innerChecked);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
componentWillLoad() {
|
|
16
|
+
this.innerChecked = this.checked;
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
return (h("label", { key: '539add927a6a67d6a1461946a31299ca0e86d848', class: `toggle ${this.disabled ? 'toggle--disabled' : ''}` }, this.label && h("span", { key: '8c881782b2dfe533c03db72bc94a3abd3c83e4a7', class: "toggle__label" }, this.label), h("button", { key: '6f512fd79089b7008386fc9a546870ccd694ca87', class: `toggle__track ${this.innerChecked ? 'toggle__track--on' : ''}`, role: "switch", "aria-checked": this.innerChecked ? 'true' : 'false', disabled: this.disabled, onClick: this.handleToggle }, h("span", { key: '341416b72ffe057213e369a5ee3ef403a65f1b20', class: "toggle__thumb" }))));
|
|
20
|
+
}
|
|
21
|
+
static get is() { return "luster-toggle"; }
|
|
22
|
+
static get encapsulation() { return "shadow"; }
|
|
23
|
+
static get originalStyleUrls() {
|
|
24
|
+
return {
|
|
25
|
+
"$": ["luster-toggle.css"]
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
static get styleUrls() {
|
|
29
|
+
return {
|
|
30
|
+
"$": ["luster-toggle.css"]
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
static get properties() {
|
|
34
|
+
return {
|
|
35
|
+
"label": {
|
|
36
|
+
"type": "string",
|
|
37
|
+
"mutable": false,
|
|
38
|
+
"complexType": {
|
|
39
|
+
"original": "string",
|
|
40
|
+
"resolved": "string",
|
|
41
|
+
"references": {}
|
|
42
|
+
},
|
|
43
|
+
"required": false,
|
|
44
|
+
"optional": false,
|
|
45
|
+
"docs": {
|
|
46
|
+
"tags": [],
|
|
47
|
+
"text": ""
|
|
48
|
+
},
|
|
49
|
+
"getter": false,
|
|
50
|
+
"setter": false,
|
|
51
|
+
"reflect": false,
|
|
52
|
+
"attribute": "label",
|
|
53
|
+
"defaultValue": "''"
|
|
54
|
+
},
|
|
55
|
+
"checked": {
|
|
56
|
+
"type": "boolean",
|
|
57
|
+
"mutable": false,
|
|
58
|
+
"complexType": {
|
|
59
|
+
"original": "boolean",
|
|
60
|
+
"resolved": "boolean",
|
|
61
|
+
"references": {}
|
|
62
|
+
},
|
|
63
|
+
"required": false,
|
|
64
|
+
"optional": false,
|
|
65
|
+
"docs": {
|
|
66
|
+
"tags": [],
|
|
67
|
+
"text": ""
|
|
68
|
+
},
|
|
69
|
+
"getter": false,
|
|
70
|
+
"setter": false,
|
|
71
|
+
"reflect": false,
|
|
72
|
+
"attribute": "checked",
|
|
73
|
+
"defaultValue": "false"
|
|
74
|
+
},
|
|
75
|
+
"disabled": {
|
|
76
|
+
"type": "boolean",
|
|
77
|
+
"mutable": false,
|
|
78
|
+
"complexType": {
|
|
79
|
+
"original": "boolean",
|
|
80
|
+
"resolved": "boolean",
|
|
81
|
+
"references": {}
|
|
82
|
+
},
|
|
83
|
+
"required": false,
|
|
84
|
+
"optional": false,
|
|
85
|
+
"docs": {
|
|
86
|
+
"tags": [],
|
|
87
|
+
"text": ""
|
|
88
|
+
},
|
|
89
|
+
"getter": false,
|
|
90
|
+
"setter": false,
|
|
91
|
+
"reflect": false,
|
|
92
|
+
"attribute": "disabled",
|
|
93
|
+
"defaultValue": "false"
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
static get states() {
|
|
98
|
+
return {
|
|
99
|
+
"innerChecked": {}
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
static get events() {
|
|
103
|
+
return [{
|
|
104
|
+
"method": "dcChange",
|
|
105
|
+
"name": "dcChange",
|
|
106
|
+
"bubbles": true,
|
|
107
|
+
"cancelable": true,
|
|
108
|
+
"composed": true,
|
|
109
|
+
"docs": {
|
|
110
|
+
"tags": [],
|
|
111
|
+
"text": ""
|
|
112
|
+
},
|
|
113
|
+
"complexType": {
|
|
114
|
+
"original": "boolean",
|
|
115
|
+
"resolved": "boolean",
|
|
116
|
+
"references": {}
|
|
117
|
+
}
|
|
118
|
+
}];
|
|
119
|
+
}
|
|
120
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Foundations/Toggle',
|
|
4
|
+
tags: ['autodocs'],
|
|
5
|
+
parameters: {
|
|
6
|
+
docs: {
|
|
7
|
+
description: {
|
|
8
|
+
component: 'Interruptor on/off. Props: `label`, `checked`, `disabled`.',
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
argTypes: {
|
|
13
|
+
label: { control: 'text', description: 'Label ao lado do toggle' },
|
|
14
|
+
checked: {
|
|
15
|
+
control: 'boolean',
|
|
16
|
+
description: 'Estado ativado',
|
|
17
|
+
table: { defaultValue: { summary: 'false' } },
|
|
18
|
+
},
|
|
19
|
+
disabled: {
|
|
20
|
+
control: 'boolean',
|
|
21
|
+
description: 'Desabilita interação',
|
|
22
|
+
table: { defaultValue: { summary: 'false' } },
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
args: {
|
|
26
|
+
label: 'Enable notifications',
|
|
27
|
+
checked: false,
|
|
28
|
+
disabled: false,
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
export default meta;
|
|
32
|
+
const render = (args) => html `
|
|
33
|
+
<luster-toggle
|
|
34
|
+
label="${args.label}"
|
|
35
|
+
?checked="${args.checked}"
|
|
36
|
+
?disabled="${args.disabled}"
|
|
37
|
+
></luster-toggle>
|
|
38
|
+
`;
|
|
39
|
+
export const Off = {
|
|
40
|
+
args: { label: 'Dark mode', checked: false },
|
|
41
|
+
render,
|
|
42
|
+
};
|
|
43
|
+
export const On = {
|
|
44
|
+
args: { label: 'Dark mode', checked: true },
|
|
45
|
+
render,
|
|
46
|
+
};
|
|
47
|
+
export const Disabled = {
|
|
48
|
+
args: { label: 'Locked setting', disabled: true },
|
|
49
|
+
render,
|
|
50
|
+
};
|
|
51
|
+
export const NoLabel = {
|
|
52
|
+
name: 'No Label',
|
|
53
|
+
args: { label: '', checked: false },
|
|
54
|
+
render,
|
|
55
|
+
};
|
|
56
|
+
export const AllStates = {
|
|
57
|
+
name: 'All States',
|
|
58
|
+
render: () => html `
|
|
59
|
+
<div style="display:flex;flex-direction:column;gap:1rem;">
|
|
60
|
+
<luster-toggle label="Off"></luster-toggle>
|
|
61
|
+
<luster-toggle label="On" ?checked="${true}"></luster-toggle>
|
|
62
|
+
<luster-toggle label="Disabled off" ?disabled="${true}"></luster-toggle>
|
|
63
|
+
<luster-toggle label="Disabled on" ?checked="${true}" ?disabled="${true}"></luster-toggle>
|
|
64
|
+
</div>
|
|
65
|
+
`,
|
|
66
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get the base path to where the assets can be found. Use "setAssetPath(path)"
|
|
3
|
+
* if the path needs to be customized.
|
|
4
|
+
*/
|
|
5
|
+
export declare const getAssetPath: (path: string) => string;
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Used to manually set the base path where assets can be found.
|
|
9
|
+
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
10
|
+
* such as "setAssetPath(import.meta.url)". Other options include
|
|
11
|
+
* "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
|
|
12
|
+
* dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
|
|
13
|
+
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
14
|
+
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
15
|
+
* will have to ensure the static assets are copied to its build directory.
|
|
16
|
+
*/
|
|
17
|
+
export declare const setAssetPath: (path: string) => void;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Used to specify a nonce value that corresponds with an application's CSP.
|
|
21
|
+
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
|
|
22
|
+
* Alternatively, the nonce value can be set on a meta tag in the DOM head
|
|
23
|
+
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
|
|
24
|
+
* will result in the same behavior.
|
|
25
|
+
*/
|
|
26
|
+
export declare const setNonce: (nonce: string) => void
|
|
27
|
+
|
|
28
|
+
export interface SetPlatformOptions {
|
|
29
|
+
raf?: (c: FrameRequestCallback) => number;
|
|
30
|
+
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
31
|
+
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
32
|
+
}
|
|
33
|
+
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterAccordion extends Components.LusterAccordion, HTMLElement {}
|
|
4
|
+
export const LusterAccordion: {
|
|
5
|
+
prototype: LusterAccordion;
|
|
6
|
+
new (): LusterAccordion;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as a,createEvent as c,h as i,transformTag as t}from"@stencil/core/internal/client";import{d as o}from"./luster-badge2.js";const r=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dcToggle=c(this,"dcToggle",7),this.heading="",this.subtitle="",this.badge="",this.badgeVariant="default",this.expanded=!1,this.isExpanded=!1,this.handleToggle=()=>{this.isExpanded=!this.isExpanded,this.dcToggle.emit(this.isExpanded)}}componentWillLoad(){this.isExpanded=this.expanded}render(){return i("div",{key:"8354addfd70119cc5c50b0cadb414d341f5c4dd1",class:"accordion "+(this.isExpanded?"accordion--expanded":"")},i("button",{key:"bffcbfdef833e817b8e03c79fa72b5a5a4edbbb0",class:"accordion__trigger",onClick:this.handleToggle,"aria-expanded":this.isExpanded?"true":"false"},i("div",{key:"5b6e51d9e0eabb125b50b54ebd54667432a672b3",class:"accordion__trigger-left"},this.badge&&i("luster-badge",{key:"1894640145ac7ab6df3867b9710e475573c99b5b",variant:this.badgeVariant,size:"sm"},this.badge),i("div",{key:"30e6782a85ceec036d91b12c936c5c2863a4f017",class:"accordion__titles"},i("span",{key:"7c7bf525077ba806efb13ddee674a6049af64204",class:"accordion__title"},this.heading),this.subtitle&&i("span",{key:"d888d5b78704713aa1c4c9cc902dbd04979503e2",class:"accordion__subtitle"},this.subtitle))),i("span",{key:"98601396b5fcd1d777935d400a1f01072c9d437a",class:"accordion__chevron "+(this.isExpanded?"accordion__chevron--up":"")},i("svg",{key:"5c9c4af605307d12973f82c5166d8e3873e402c3",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none"},i("polyline",{key:"d59e9cc24f98cdd87c317f3107b34ba9c732b3af",points:"6,9 12,15 18,9",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("div",{key:"3b7245e52cc48797637756d8ec66bcf1868adfe4",class:"accordion__content","aria-hidden":this.isExpanded?"false":"true"},i("div",{key:"ab1069f5ab0d102b16fc02ef71365c4cd4525af8",class:"accordion__inner"},i("slot",{key:"cfc15924e2effa62732dd221d846f44baeff0901"}))))}static get style(){return":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}"}},[257,"luster-accordion",{heading:[1],subtitle:[1],badge:[1],badgeVariant:[1,"badge-variant"],expanded:[1028],isExpanded:[32]}]),d=r,n=function(){"undefined"!=typeof customElements&&["luster-accordion","luster-badge"].forEach((e=>{switch(e){case"luster-accordion":customElements.get(t(e))||customElements.define(t(e),r);break;case"luster-badge":customElements.get(t(e))||o()}}))};export{d as LusterAccordion,n as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterActivityItem extends Components.LusterActivityItem, HTMLElement {}
|
|
4
|
+
export const LusterActivityItem: {
|
|
5
|
+
prototype: LusterActivityItem;
|
|
6
|
+
new (): LusterActivityItem;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as i,h as e,transformTag as r}from"@stencil/core/internal/client";const a=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.label="",this.description="",this.time="",this.variant="activity",this.icon="edit",this.fileSize="",this.downloadable=!1}getIcon(){switch(this.icon){case"edit":return e("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},e("path",{d:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),e("path",{d:"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}));case"sync":return e("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},e("polyline",{points:"1 4 1 10 7 10",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"M3.51 15a9 9 0 1 0 .49-8.49",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}));case"user":return e("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},e("path",{d:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2",stroke:"currentColor","stroke-width":"2"}),e("circle",{cx:"12",cy:"7",r:"4",stroke:"currentColor","stroke-width":"2"}));case"file":return e("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},e("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",stroke:"currentColor","stroke-width":"2"}),e("polyline",{points:"14,2 14,8 20,8",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}));default:return e("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},e("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"2"}))}}render(){return"file"===this.variant?e("div",{class:"activity-item activity-item--file"},e("div",{class:"activity-item__file-icon"},this.getIcon()),e("div",{class:"activity-item__content"},e("span",{class:"activity-item__title"},this.label),e("span",{class:"activity-item__meta"},this.fileSize&&e("span",null,this.fileSize),this.time&&e("span",null,"· ",this.time))),this.downloadable&&e("button",{class:"activity-item__download","aria-label":"Download"},e("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},e("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),e("polyline",{points:"7,10 12,15 17,10",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e("line",{x1:"12",y1:"15",x2:"12",y2:"3",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})))):e("div",{class:"activity-item"},e("div",{class:"activity-item__icon"},this.getIcon()),e("div",{class:"activity-item__content"},e("span",{class:"activity-item__title"},this.label),this.description&&e("span",{class:"activity-item__desc"},this.description),this.time&&e("span",{class:"activity-item__time"},this.time)))}static get style(){return":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)}.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}"}},[1,"luster-activity-item",{label:[1],description:[1],time:[1],variant:[1],icon:[1],fileSize:[1,"file-size"],downloadable:[4]}]),o=a,n=function(){"undefined"!=typeof customElements&&["luster-activity-item"].forEach((t=>{"luster-activity-item"===t&&(customElements.get(r(t))||customElements.define(r(t),a))}))};export{o as LusterActivityItem,n as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterAlert extends Components.LusterAlert, HTMLElement {}
|
|
4
|
+
export const LusterAlert: {
|
|
5
|
+
prototype: LusterAlert;
|
|
6
|
+
new (): LusterAlert;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as o,transformTag as s}from"@stencil/core/internal/client";const i=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dcDismiss=t(this,"dcDismiss",7),this.heading="",this.message="",this.variant="info",this.dismissible=!0,this.timestamp="",this.visible=!0,this.dismiss=()=>{this.visible=!1,this.dcDismiss.emit()}}getIcon(){switch(this.variant){case"success":return o("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none"},o("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"2"}),o("path",{d:"M8 12l3 3 5-5",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}));case"error":return o("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none"},o("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"2"}),o("line",{x1:"15",y1:"9",x2:"9",y2:"15",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),o("line",{x1:"9",y1:"9",x2:"15",y2:"15",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}));case"warning":return o("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none"},o("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",stroke:"currentColor","stroke-width":"2"}),o("line",{x1:"12",y1:"9",x2:"12",y2:"13",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),o("line",{x1:"12",y1:"17",x2:"12.01",y2:"17",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}));default:return o("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none"},o("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"2"}),o("line",{x1:"12",y1:"8",x2:"12",y2:"12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),o("line",{x1:"12",y1:"16",x2:"12.01",y2:"16",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}))}}render(){return this.visible?o("div",{class:"alert alert--"+this.variant,role:"alert"},o("span",{class:"alert__icon"},this.getIcon()),o("div",{class:"alert__body"},this.heading&&o("span",{class:"alert__title"},this.heading),this.message&&o("span",{class:"alert__message"},this.message),this.timestamp&&o("span",{class:"alert__time"},this.timestamp)),this.dismissible&&o("button",{class:"alert__close",onClick:this.dismiss,"aria-label":"Dismiss"},o("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})))):null}static get style(){return":host{display:block}.alert{display:flex;align-items:flex-start;gap:var(--dc-space-3);padding:var(--dc-space-3) var(--dc-space-4);border-radius:var(--dc-round-3);border-left:3px solid currentColor;animation:slideIn 0.2s ease-out}.alert--info{background:rgba(163, 166, 255, 0.08);color:var(--dc-primary)}.alert--success{background:rgba(76, 206, 172, 0.08);color:var(--dc-success)}.alert--warning{background:rgba(255, 209, 102, 0.08);color:var(--dc-warning)}.alert--error{background:rgba(255, 180, 171, 0.08);color:var(--dc-error)}.alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.alert__body{flex:1;display:flex;flex-direction:column;gap:2px}.alert__title{font-family:var(--dc-font-body);font-size:var(--dc-body-sm);font-weight:600;color:var(--dc-on-surface)}.alert__message{font-size:var(--dc-body-sm);color:var(--dc-on-surface-variant)}.alert__time{font-size:var(--dc-label-sm);color:var(--dc-on-surface-variant);margin-top:var(--dc-space-1)}.alert__close{background:none;border:none;cursor:pointer;color:var(--dc-on-surface-variant);display:flex;align-items:center;justify-content:center;padding:var(--dc-space-1);border-radius:var(--dc-round-1);flex-shrink:0;opacity:0.6;transition:opacity var(--dc-transition-fast)}.alert__close:hover{opacity:1}@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}"}},[1,"luster-alert",{heading:[1],message:[1],variant:[1],dismissible:[4],timestamp:[1],visible:[32]}]),a=i,n=function(){"undefined"!=typeof customElements&&["luster-alert"].forEach((r=>{"luster-alert"===r&&(customElements.get(s(r))||customElements.define(s(r),i))}))};export{a as LusterAlert,n as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterArticleCard extends Components.LusterArticleCard, HTMLElement {}
|
|
4
|
+
export const LusterArticleCard: {
|
|
5
|
+
prototype: LusterArticleCard;
|
|
6
|
+
new (): LusterArticleCard;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as e,h as r,transformTag as c}from"@stencil/core/internal/client";const t=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.category="",this.heading="",this.excerpt="",this.date="",this.author="",this.authorRole="",this.imageUrl="",this.featured=!1}render(){return r("article",{key:"520f8dc527b674523094963a9fe21caa1bfe1cff",class:"article-card "+(this.featured?"article-card--featured":"")},this.featured&&this.imageUrl&&r("div",{key:"8f190538fbacc6e87be7573a5d91fce8c1f9dd53",class:"article-card__image"},r("img",{key:"120e1b8d46076ab89333565f9b0c6b98ad6b2850",src:this.imageUrl,alt:this.heading}),r("div",{key:"a31961b7c434a95ba063f5a0a121c5b3b4709484",class:"article-card__image-overlay"})),r("div",{key:"dd331d9b8896566747539b658d4e3c77eff11798",class:"article-card__body"},this.category&&r("span",{key:"26f6c42e629c2576715d3c0b43ec61a73edbf8f1",class:"article-card__category"},this.category),this.date&&!this.featured&&r("span",{key:"3d05f2ae1b3b102558422307b545f144ea920cd4",class:"article-card__date"},this.date),this.date&&this.featured&&r("span",{key:"492c6989b62416e891349a7027ce9cade8be229a",class:"article-card__date"},this.date),r("h3",{key:"aa7a850253dbf612ba16fa9b628a2abd25a74083",class:"article-card__title"},this.heading),this.excerpt&&r("p",{key:"933fd34f4f424d95f94d05eacbe6b4694cc580a8",class:"article-card__excerpt"},this.excerpt),(this.author||this.authorRole)&&r("div",{key:"b0a42dd52449991dab675fd2d492c6646f7f9dfc",class:"article-card__byline"},r("div",{key:"2ea5b62143c7f4796f46faca3e6f1fa7419b6c93",class:"article-card__author-avatar"},this.author.charAt(0)),r("div",{key:"b1e7ff029659a237da73c7421f5742b1ce655a60"},r("span",{key:"e4a71f5e73610d6b5fcce237cd30a1f9eb8512ea",class:"article-card__author"},this.author),this.authorRole&&r("span",{key:"936042578927a847d0601bdfba58afafcc57cbf9",class:"article-card__author-role"},this.authorRole)),r("span",{key:"5435de2d1ecb991c8500bbb3c7e22b3f3dc7f361",class:"article-card__read-more"},r("svg",{key:"49186537061817a26ded5538a8b5cf185b5c5e1e",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none"},r("path",{key:"7304d21f204471e939ebeeeb51d3eb817e392262",d:"M5 12h14M12 5l7 7-7 7",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})),"More"))))}static get style(){return":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}"}},[1,"luster-article-card",{category:[1],heading:[1],excerpt:[1],date:[1],author:[1],authorRole:[1,"author-role"],imageUrl:[1,"image-url"],featured:[4]}]),i=t,d=function(){"undefined"!=typeof customElements&&["luster-article-card"].forEach((a=>{"luster-article-card"===a&&(customElements.get(c(a))||customElements.define(c(a),t))}))};export{i as LusterArticleCard,d as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterBadge extends Components.LusterBadge, HTMLElement {}
|
|
4
|
+
export const LusterBadge: {
|
|
5
|
+
prototype: LusterBadge;
|
|
6
|
+
new (): LusterBadge;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{D as s,d as o}from"./luster-badge2.js";const r=s,t=o;export{r as LusterBadge,t as defineCustomElement}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as e,h as r,transformTag as d}from"@stencil/core/internal/client";const c=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.variant="default",this.dot=!1,this.size="md"}render(){return r("span",{key:"4d49db25a7cb0f0bc72b5b7da55c7bdaca4a56a6",class:`badge badge--${this.variant} badge--${this.size}`},this.dot&&r("span",{key:"592ddbcbdfaa412bec7fa021c1e0d230d6716f41",class:"badge__dot"}),r("slot",{key:"8dcb4f58ac4c236ba6a1de5e22afed861bf78a7f"}))}static get style(){return":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}.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}}"}},[257,"luster-badge",{variant:[1],dot:[4],size:[1]}]);function s(){"undefined"!=typeof customElements&&["luster-badge"].forEach((a=>{"luster-badge"===a&&(customElements.get(d(a))||customElements.define(d(a),c))}))}export{c as D,s as d}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterButton extends Components.LusterButton, HTMLElement {}
|
|
4
|
+
export const LusterButton: {
|
|
5
|
+
prototype: LusterButton;
|
|
6
|
+
new (): LusterButton;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{D as t,d as o}from"./luster-button2.js";const s=t,r=o;export{s as LusterButton,r as defineCustomElement}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as r,HTMLElement as t,createEvent as e,h as a,transformTag as n}from"@stencil/core/internal/client";const d=r(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dcClick=e(this,"dcClick",7),this.variant="primary",this.size="md",this.disabled=!1,this.loading=!1,this.fullWidth=!1,this.type="button",this.handleClick=()=>{this.disabled||this.loading||this.dcClick.emit()}}render(){return a("button",{key:"b1f275431288cf48cdcd77fd0ff0ce94ed6c7471",class:["btn",`btn--${this.variant}`,`btn--${this.size}`,this.loading?"btn--loading":"",this.fullWidth?"btn--full":""].filter(Boolean).join(" "),disabled:this.disabled||this.loading,type:this.type,onClick:this.handleClick},this.loading&&a("span",{key:"024a89db11699ec8f4a2606cf550ad060cf9981a",class:"btn__spinner","aria-hidden":"true"}),a("span",{key:"8586524c1551bdf8dc6d5c597f5fc5ecebd54054",class:"btn__content"},a("slot",{key:"5f8ace974b28574208c5f4fc146573d0bdb100c3"})))}static get style(){return":host{display:inline-flex}:host([full-width]){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--dc-space-2);border:none;border-radius:var(--dc-round-2);font-family:var(--dc-font-body);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;transition:all var(--dc-transition-base);letter-spacing:0.01em}.btn--full{width:100%}.btn--sm{padding:var(--dc-space-1) var(--dc-space-3);font-size:var(--dc-label-md);height:32px}.btn--md{padding:var(--dc-space-2) var(--dc-space-5);font-size:var(--dc-body-md);height:40px}.btn--lg{padding:var(--dc-space-3) var(--dc-space-6);font-size:var(--dc-body-lg);height:48px}.btn--primary{background:linear-gradient(135deg, var(--dc-primary) 0%, var(--dc-primary-dim) 100%);color:var(--dc-on-primary);box-shadow:var(--dc-btn-primary-shadow)}.btn--primary:hover:not(:disabled){background:var(--dc-btn-primary-gradient-hover);box-shadow:var(--dc-btn-primary-shadow-hover);transform:translateY(-1px)}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--dc-btn-primary-shadow-press)}.btn--secondary{background:transparent;color:var(--dc-on-surface);border:1px solid var(--dc-border-strong)}.btn--secondary:hover:not(:disabled){background:var(--dc-hover-tint-icon);border-color:var(--dc-border-hover)}.btn--tertiary{background:transparent;color:var(--dc-primary);padding-left:var(--dc-space-2);padding-right:var(--dc-space-2)}.btn--tertiary:hover:not(:disabled){color:var(--dc-primary-fixed);background:var(--dc-hover-tint-strong)}.btn--destructive{background:transparent;color:var(--dc-error);border:1px solid var(--dc-error-border)}.btn--destructive:hover:not(:disabled){background:var(--dc-error-bg);border-color:var(--dc-error-border-hover)}.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none !important;box-shadow:none !important}.btn--loading{cursor:wait}.btn__spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--dc-spinner-border);border-top-color:currentColor;border-radius:var(--dc-round-full);animation:spin 0.6s linear infinite}.btn__content{display:inline-flex;align-items:center;gap:var(--dc-space-2)}@keyframes spin{to{transform:rotate(360deg)}}"}},[257,"luster-button",{variant:[1],size:[1],disabled:[4],loading:[4],fullWidth:[4,"full-width"],type:[1]}]);function o(){"undefined"!=typeof customElements&&["luster-button"].forEach((r=>{"luster-button"===r&&(customElements.get(n(r))||customElements.define(n(r),d))}))}export{d as D,o as d}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterCard extends Components.LusterCard, HTMLElement {}
|
|
4
|
+
export const LusterCard: {
|
|
5
|
+
prototype: LusterCard;
|
|
6
|
+
new (): LusterCard;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as r,h as d,transformTag as e}from"@stencil/core/internal/client";const c=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.variant="default",this.padding="md",this.hoverable=!1}render(){return d("div",{key:"b49300a94d3ec06822794698af4a1d8da248d319",class:["card","card--"+this.variant,"card--pad-"+this.padding,this.hoverable?"card--hoverable":""].filter(Boolean).join(" ")},d("slot",{key:"05c26e4626e0610588ab6694355f315b0adc9327"}))}static get style(){return":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)}"}},[257,"luster-card",{variant:[1],padding:[1],hoverable:[4]}]),s=c,t=function(){"undefined"!=typeof customElements&&["luster-card"].forEach((a=>{"luster-card"===a&&(customElements.get(e(a))||customElements.define(e(a),c))}))};export{s as LusterCard,t as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterCheckbox extends Components.LusterCheckbox, HTMLElement {}
|
|
4
|
+
export const LusterCheckbox: {
|
|
5
|
+
prototype: LusterCheckbox;
|
|
6
|
+
new (): LusterCheckbox;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as c,createEvent as t,h as o,transformTag as r}from"@stencil/core/internal/client";const i=e(class extends c{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dcChange=t(this,"dcChange",7),this.label="",this.checked=!1,this.disabled=!1,this.indeterminate=!1,this.value="",this.innerChecked=!1,this.handleChange=()=>{this.disabled||(this.innerChecked=!this.innerChecked,this.dcChange.emit(this.innerChecked))}}componentWillLoad(){this.innerChecked=this.checked}render(){return o("label",{key:"045e94d76f2ba6cc1ebbcbb3bfa82289fc761d31",class:"checkbox "+(this.disabled?"checkbox--disabled":""),onClick:this.handleChange},o("span",{key:"2ec03e604ef10657e8cdde93c9878b22525a3b35",class:`checkbox__box ${this.innerChecked?"checkbox__box--checked":""} ${this.indeterminate?"checkbox__box--indeterminate":""}`},this.innerChecked&&!this.indeterminate&&o("svg",{key:"ab90b16c273244ca84f22ae31053f28c620480fd",width:"10",height:"8",viewBox:"0 0 10 8",fill:"none"},o("path",{key:"c333e014a043775ceddeebbefbac1e05441e942e",d:"M1 4L3.5 6.5L9 1",stroke:"currentColor","stroke-width":"1.8","stroke-linecap":"round","stroke-linejoin":"round"})),this.indeterminate&&o("svg",{key:"919fbd28b4d3d69a799ee92ff8bce515a855a4c1",width:"10",height:"2",viewBox:"0 0 10 2",fill:"none"},o("line",{key:"055debe6bfd40ed0a67c62553c1219e3d30a8d52",x1:"1",y1:"1",x2:"9",y2:"1",stroke:"currentColor","stroke-width":"1.8","stroke-linecap":"round"}))),this.label&&o("span",{key:"6e0a0ab1e3d2a61df2c97fa407761eabd927ef76",class:"checkbox__label"},this.label))}static get style(){return":host{display:inline-flex}.checkbox{display:inline-flex;align-items:center;gap:var(--dc-space-3);cursor:pointer;user-select:none}.checkbox--disabled{opacity:0.4;cursor:not-allowed}.checkbox__box{width:18px;height:18px;border-radius:var(--dc-round-1);border:1.5px solid var(--dc-border-strong);background:var(--dc-surface-container-lowest);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--dc-transition-fast);color:var(--dc-on-primary)}.checkbox__box--checked,.checkbox__box--indeterminate{background:var(--dc-primary);border-color:var(--dc-primary)}.checkbox:hover .checkbox__box:not(.checkbox__box--checked){border-color:var(--dc-primary);background:var(--dc-hover-tint-strong)}.checkbox__label{font-family:var(--dc-font-body);font-size:var(--dc-body-md);color:var(--dc-on-surface)}"}},[1,"luster-checkbox",{label:[1],checked:[4],disabled:[4],indeterminate:[4],value:[1],innerChecked:[32]}]),s=i,a=function(){"undefined"!=typeof customElements&&["luster-checkbox"].forEach((e=>{"luster-checkbox"===e&&(customElements.get(r(e))||customElements.define(r(e),i))}))};export{s as LusterCheckbox,a as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterColorSwatch extends Components.LusterColorSwatch, HTMLElement {}
|
|
4
|
+
export const LusterColorSwatch: {
|
|
5
|
+
prototype: LusterColorSwatch;
|
|
6
|
+
new (): LusterColorSwatch;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as s,HTMLElement as t,h as c,transformTag as e}from"@stencil/core/internal/client";const a=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.color="#a3a6ff",this.name="",this.hex="",this.size="md"}render(){return c("div",{key:"6ea9cb759f0d060dd393e6de23429c4b515d7139",class:"swatch swatch--"+this.size},c("div",{key:"8b6883cc045ed739c80b10bc416d64156a873109",class:"swatch__color",style:{backgroundColor:this.color}}),c("div",{key:"5c9b62e83b8442a29a623bd8ac1503f78bc965e5",class:"swatch__info"},this.name&&c("span",{key:"5ab7e003ed7158297661bde476f1fbc66e96ff88",class:"swatch__name"},this.name),this.hex&&c("span",{key:"df26e2458cad5537e2cbd00765256ae2b4eae9ca",class:"swatch__hex"},this.hex)))}static get style(){return":host{display:inline-flex}.swatch{display:flex;flex-direction:column;gap:var(--dc-space-2)}.swatch__color{border-radius:var(--dc-round-3);transition:transform var(--dc-transition-fast)}.swatch__color:hover{transform:scale(1.03)}.swatch--sm .swatch__color{width:60px;height:60px}.swatch--md .swatch__color{width:80px;height:80px}.swatch--lg .swatch__color{width:100px;height:100px}.swatch__info{display:flex;flex-direction:column;gap:2px}.swatch__name{font-size:var(--dc-label-sm);font-weight:600;color:var(--dc-on-surface);white-space:nowrap}.swatch__hex{font-size:var(--dc-label-sm);color:var(--dc-on-surface-variant);font-family:monospace}"}},[1,"luster-color-swatch",{color:[1],name:[1],hex:[1],size:[1]}]),o=a,r=function(){"undefined"!=typeof customElements&&["luster-color-swatch"].forEach((s=>{"luster-color-swatch"===s&&(customElements.get(e(s))||customElements.define(e(s),a))}))};export{o as LusterColorSwatch,r as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterFeatureQuote extends Components.LusterFeatureQuote, HTMLElement {}
|
|
4
|
+
export const LusterFeatureQuote: {
|
|
5
|
+
prototype: LusterFeatureQuote;
|
|
6
|
+
new (): LusterFeatureQuote;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as a,h as t,transformTag as r}from"@stencil/core/internal/client";const d=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.quote="",this.author="",this.role="",this.variant="default"}render(){return t("blockquote",{key:"4ed1344a05bfd89c63005ba64b8cd9a32db0f6c5",class:"feature-quote feature-quote--"+this.variant},t("span",{key:"47bdfd40fe685f876b64b421ff706afdc42c0541",class:"feature-quote__mark"},'"'),t("p",{key:"1b3f0735be2544ab0332455875f12c4d3ca51865",class:"feature-quote__text"},this.quote||t("slot",{key:"f012c749d221d62ef919c898e181547a154e4b85"})),(this.author||this.role)&&t("footer",{key:"04740fe325d696cfa258e4e946b2385cfa5b2173",class:"feature-quote__attribution"},this.author&&t("div",{key:"25c2a6ca4d16b965d7563a495ee8350a7ca93e4a",class:"feature-quote__author-wrap"},t("div",{key:"9e8a34dfe0c05de5440a3d63700fec4b749264c3",class:"feature-quote__author-avatar"},this.author.charAt(0)),t("div",{key:"113098f2c5fdbecf0d8088d265ddef76c0751776"},t("span",{key:"e140de5e35d6aec4fe974d55f2f3b14b4f6c33b8",class:"feature-quote__author"},this.author),this.role&&t("span",{key:"fd6bd76a054ba0eda2deec30d596d2dc35495bd3",class:"feature-quote__role"},this.role)))))}static get style(){return":host{display:block}.feature-quote{margin:0;padding:var(--dc-space-6) var(--dc-space-8);border-left:4px solid var(--dc-primary);background:var(--dc-surface-container-high);border-radius:0 var(--dc-round-4) var(--dc-round-4) 0;position:relative}.feature-quote--large{padding:var(--dc-space-8) var(--dc-space-10);border-radius:var(--dc-round-4);border-left:4px solid var(--dc-primary)}.feature-quote--inline{background:transparent;padding:var(--dc-space-4) var(--dc-space-6)}.feature-quote__mark{position:absolute;top:var(--dc-space-3);left:var(--dc-space-5);font-family:var(--dc-font-display);font-size:3rem;color:var(--dc-primary);opacity:0.4;line-height:1}.feature-quote__text{font-family:var(--dc-font-display);font-size:var(--dc-headline-sm);font-weight:700;font-style:italic;color:var(--dc-primary-fixed);line-height:1.4;letter-spacing:var(--dc-tracking-tight);margin:0}.feature-quote--large .feature-quote__text{font-size:var(--dc-headline-md)}.feature-quote__attribution{margin-top:var(--dc-space-4)}.feature-quote__author-wrap{display:flex;align-items:center;gap:var(--dc-space-3)}.feature-quote__author-avatar{width:28px;height:28px;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:var(--dc-label-sm);font-weight:700;color:var(--dc-on-primary);flex-shrink:0}.feature-quote__author{display:block;font-size:var(--dc-label-md);font-weight:600;color:var(--dc-on-surface)}.feature-quote__role{display:block;font-size:var(--dc-label-sm);color:var(--dc-on-surface-variant)}"}},[257,"luster-feature-quote",{quote:[1],author:[1],role:[1],variant:[1]}]),c=d,o=function(){"undefined"!=typeof customElements&&["luster-feature-quote"].forEach((e=>{"luster-feature-quote"===e&&(customElements.get(r(e))||customElements.define(r(e),d))}))};export{c as LusterFeatureQuote,o as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterHero extends Components.LusterHero, HTMLElement {}
|
|
4
|
+
export const LusterHero: {
|
|
5
|
+
prototype: LusterHero;
|
|
6
|
+
new (): LusterHero;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as a,h as r,transformTag as t}from"@stencil/core/internal/client";const i=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.heading="",this.subtitle="",this.section="",this.imageUrl="",this.parallax=!1}render(){return r("section",{key:"1cb214e7059158e7153d468b9fa840ce98f10aeb",class:"hero "+(this.parallax?"hero--parallax":"")},r("div",{key:"4547dbead7926629a4e915ea8cf33d56679baa49",class:"hero__bg"},this.imageUrl&&r("img",{key:"c07cc9f3c5416a05f6034ae5d4ac0a8ada6f6f8f",class:"hero__bg-img",src:this.imageUrl,alt:"","aria-hidden":"true"}),r("div",{key:"e81099f7d4601beac31e59058488195ac4a0fc22",class:"hero__bg-overlay"}),r("div",{key:"e5cc125505c0b58ad75d31417b07d298743407ec",class:"hero__bg-gradient"})),r("div",{key:"74a713512ea9aba2e79202814b21d50017169576",class:"hero__content"},this.section&&r("span",{key:"7d05f909669493c03fabc623b6716a8bd86e2493",class:"hero__section"},this.section),r("h1",{key:"4fdfe3e350c16222b084490593fb231d090b490a",class:"hero__title"},this.heading),this.subtitle&&r("p",{key:"f30209ac7d84bfe259b0852b2779c50bc1a9f4bd",class:"hero__subtitle"},this.subtitle),r("div",{key:"b2f9656bdb0a921d95b328771457ac841ed03df9",class:"hero__actions"},r("slot",{key:"758806782726fc7e4b66b037afe554e524d05c74"}))),r("div",{key:"b6468db237dfc6b2e859117bd1419c746a8e0032",class:"hero__layer-badge"},r("span",{key:"2bc5f3dc8f6b16bfb3ac18c76d8cd656e48c4bfa",class:"hero__layer-text"},"Parallax Layer 01"),r("span",{key:"87d7d56dc8964cfd479e5cfea348424158f6fa7d",class:"hero__layer-sub"},"depth: 0.3")))}static get style(){return":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% )}.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}"}},[257,"luster-hero",{heading:[1],subtitle:[1],section:[1],imageUrl:[1,"image-url"],parallax:[4]}]),o=i,c=function(){"undefined"!=typeof customElements&&["luster-hero"].forEach((e=>{"luster-hero"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))};export{o as LusterHero,c as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface LusterInput extends Components.LusterInput, HTMLElement {}
|
|
4
|
+
export const LusterInput: {
|
|
5
|
+
prototype: LusterInput;
|
|
6
|
+
new (): LusterInput;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,transformTag as s}from"@stencil/core/internal/client";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dcChange=r(this,"dcChange",7),this.dcInput=r(this,"dcInput",7),this.dcFocus=r(this,"dcFocus",7),this.dcBlur=r(this,"dcBlur",7),this.label="",this.placeholder="",this.value="",this.type="text",this.error=!1,this.errorMessage="",this.helperText="",this.disabled=!1,this.readonly=!1,this.name="",this.focused=!1,this.innerValue="",this.handleInput=e=>{const t=e.target;this.innerValue=t.value,this.dcInput.emit(t.value)},this.handleChange=e=>{this.dcChange.emit(e.target.value)},this.handleFocus=()=>{this.focused=!0,this.dcFocus.emit()},this.handleBlur=()=>{this.focused=!1,this.dcBlur.emit()}}componentWillLoad(){this.innerValue=this.value}render(){const e=this.error,t=["input-wrapper",e?"input-wrapper--error":"",this.focused?"input-wrapper--focused":"",this.disabled?"input-wrapper--disabled":""].filter(Boolean).join(" ");return i("div",{key:"9973fc5e101503b63bc060f0e0c5f3eba3367543",class:t},this.label&&i("label",{key:"0fcf79b73c6a04ecd40b2d0f1cc85f87cc5fd6ac",class:"input__label"},this.label),i("div",{key:"135a4b38ddcaf1a09e968cc629ee3cf59a2261af",class:"input__field-box"},i("input",{key:"9aa11ddc2c5808ee174f5279b8d5544a3392f389",class:"input__field",type:this.type,placeholder:this.placeholder,value:this.innerValue,disabled:this.disabled,readonly:this.readonly,name:this.name,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})),e&&this.errorMessage&&i("span",{key:"eafa6c55b09c8b8fbcd5cd1f2350993cf7c9199f",class:"input__message input__message--error"},i("svg",{key:"619cef649ef4e5b82df131844e336a06f3881ad1",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none"},i("circle",{key:"23c0e89e4c895e2884ff99031c0f282fa8435e96",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"2"}),i("line",{key:"377ffaea6f80ee4806ad824fd0de312d94fd0f52",x1:"12",y1:"8",x2:"12",y2:"12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),i("line",{key:"d1d67467a4f4f4a97b4da3822d536031ad63112a",x1:"12",y1:"16",x2:"12.01",y2:"16",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})),this.errorMessage),!e&&this.helperText&&i("span",{key:"ac62c67973896a90db17efd5c0029695a1a7fe79",class:"input__message"},this.helperText))}static get style(){return":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)}"}},[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]}]),o=a,c=function(){"undefined"!=typeof customElements&&["luster-input"].forEach((e=>{"luster-input"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))};export{o as LusterInput,c as defineCustomElement}
|