@re-code/ui-components 0.0.5 → 0.0.7
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/dist/cjs/ui-label.cjs.entry.js +5 -3
- package/dist/collection/components/ui-label/ui-label.css +63 -95
- package/dist/collection/components/ui-label/ui-label.js +7 -4
- package/dist/collection/components/ui-label/ui-label.stories.js +12 -10
- package/dist/components/ui-label.js +1 -1
- package/dist/esm/ui-label.entry.js +5 -3
- package/dist/types/components.d.ts +7 -1
- package/dist/ui-components/p-cc5e537f.entry.js +1 -0
- package/dist/ui-components/ui-components.esm.js +1 -1
- package/package.json +2 -2
- package/dist/ui-components/p-00537ea8.entry.js +0 -1
|
@@ -2,23 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BUHK0YWO.js');
|
|
4
4
|
|
|
5
|
-
const uiLabelCss = () => `:host{display:inline-block;font-family:"Roboto", system-ui, -apple-system, sans-serif;
|
|
5
|
+
const uiLabelCss = () => `:host{display:inline-block}.ui-label{color:inherit;margin:0;padding:0;font-family:"Roboto", system-ui, -apple-system, sans-serif;transition:color 0.2s ease-in-out}.ui-label--display-large{font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}.ui-label--display-medium{font-size:45px;line-height:52px;font-weight:400;letter-spacing:0px}.ui-label--display-small{font-size:36px;line-height:44px;font-weight:400;letter-spacing:0px}.ui-label--headline-large{font-size:32px;line-height:40px;font-weight:400;letter-spacing:0px}.ui-label--headline-medium{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0px}.ui-label--headline-small{font-size:24px;line-height:32px;font-weight:400;letter-spacing:0px}.ui-label--title-large{font-size:22px;line-height:28px;font-weight:400;letter-spacing:0px}.ui-label--title-medium{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}.ui-label--title-small{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--body-large{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}.ui-label--body-medium{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}.ui-label--body-small{font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}.ui-label--label-large{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--label-medium{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--label-small{font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--color-primary{color:var(--color-primary, #6750A4)}.ui-label--color-on-primary{color:var(--color-on-primary, #FFFFFF)}.ui-label--color-primary-container{color:var(--color-primary-container, #EADDFF)}.ui-label--color-on-primary-container{color:var(--color-on-primary-container, #21005D)}.ui-label--color-secondary{color:var(--color-secondary, #625B71)}.ui-label--color-on-secondary{color:var(--color-on-secondary, #FFFFFF)}.ui-label--color-secondary-container{color:var(--color-secondary-container, #E8DEF8)}.ui-label--color-on-secondary-container{color:var(--color-on-secondary-container, #1D192B)}.ui-label--color-tertiary{color:var(--color-tertiary, #7D5260)}.ui-label--color-on-tertiary{color:var(--color-on-tertiary, #FFFFFF)}.ui-label--color-tertiary-container{color:var(--color-tertiary-container, #FFD8E4)}.ui-label--color-on-tertiary-container{color:var(--color-on-tertiary-container, #31111D)}.ui-label--color-error{color:var(--color-error, #B3261E)}.ui-label--color-on-error{color:var(--color-on-error, #FFFFFF)}.ui-label--color-surface{color:var(--color-surface, #FEF7FF)}.ui-label--color-on-surface{color:var(--color-on-surface, #1D1B20)}.ui-label--color-on-surface-variant{color:var(--color-on-surface-variant, #49454F)}.ui-label--color-outline{color:var(--color-outline, #79747E)}.ui-label--weight-normal{font-weight:400}.ui-label--weight-medium{font-weight:500}.ui-label--weight-bold{font-weight:700}.ui-label--italic{font-style:italic}`;
|
|
6
6
|
|
|
7
7
|
const UiLabel = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
|
+
this.label = '';
|
|
10
11
|
this.variant = 'body-medium';
|
|
11
12
|
this.color = 'on-surface';
|
|
12
13
|
this.italic = false;
|
|
13
14
|
}
|
|
14
15
|
render() {
|
|
15
16
|
const classMap = {
|
|
17
|
+
'ui-label': true,
|
|
16
18
|
[`ui-label--${this.variant}`]: true,
|
|
17
19
|
[`ui-label--color-${this.color}`]: true,
|
|
18
20
|
[`ui-label--weight-${this.weight}`]: !!this.weight,
|
|
19
|
-
'ui-label--italic': this.italic
|
|
21
|
+
'ui-label--italic': this.italic,
|
|
20
22
|
};
|
|
21
|
-
return (index.h(index.Host, { key: '
|
|
23
|
+
return (index.h(index.Host, { key: '2775ed362454ba509ff4f97d6820c17b99c9f348' }, index.h("span", { key: '183517d9e92f5c9cceb8520d72d874b897acdc24', class: classMap }, this.label, index.h("slot", { key: '5e02ec614d3000e6d5876250d3710253b82d9abe' }))));
|
|
22
24
|
}
|
|
23
25
|
};
|
|
24
26
|
UiLabel.style = uiLabelCss();
|
|
@@ -1,199 +1,167 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: inline-block;
|
|
3
|
-
font-family: "Roboto", system-ui, -apple-system, sans-serif;
|
|
4
|
-
color: #1D1B20;
|
|
5
|
-
transition: all 0.2s ease-in-out;
|
|
6
3
|
}
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
.ui-label {
|
|
6
|
+
color: inherit;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
font-family: "Roboto", system-ui, -apple-system, sans-serif;
|
|
10
|
+
transition: color 0.2s ease-in-out;
|
|
11
|
+
}
|
|
12
|
+
.ui-label--display-large {
|
|
9
13
|
font-size: 57px;
|
|
10
14
|
line-height: 64px;
|
|
11
15
|
font-weight: 400;
|
|
12
16
|
letter-spacing: -0.25px;
|
|
13
17
|
}
|
|
14
|
-
|
|
15
|
-
:host(.ui-label--display-medium) {
|
|
18
|
+
.ui-label--display-medium {
|
|
16
19
|
font-size: 45px;
|
|
17
20
|
line-height: 52px;
|
|
18
21
|
font-weight: 400;
|
|
19
22
|
letter-spacing: 0px;
|
|
20
23
|
}
|
|
21
|
-
|
|
22
|
-
:host(.ui-label--display-small) {
|
|
24
|
+
.ui-label--display-small {
|
|
23
25
|
font-size: 36px;
|
|
24
26
|
line-height: 44px;
|
|
25
27
|
font-weight: 400;
|
|
26
28
|
letter-spacing: 0px;
|
|
27
29
|
}
|
|
28
|
-
|
|
29
|
-
:host(.ui-label--headline-large) {
|
|
30
|
+
.ui-label--headline-large {
|
|
30
31
|
font-size: 32px;
|
|
31
32
|
line-height: 40px;
|
|
32
33
|
font-weight: 400;
|
|
33
34
|
letter-spacing: 0px;
|
|
34
35
|
}
|
|
35
|
-
|
|
36
|
-
:host(.ui-label--headline-medium) {
|
|
36
|
+
.ui-label--headline-medium {
|
|
37
37
|
font-size: 28px;
|
|
38
38
|
line-height: 36px;
|
|
39
39
|
font-weight: 400;
|
|
40
40
|
letter-spacing: 0px;
|
|
41
41
|
}
|
|
42
|
-
|
|
43
|
-
:host(.ui-label--headline-small) {
|
|
42
|
+
.ui-label--headline-small {
|
|
44
43
|
font-size: 24px;
|
|
45
44
|
line-height: 32px;
|
|
46
45
|
font-weight: 400;
|
|
47
46
|
letter-spacing: 0px;
|
|
48
47
|
}
|
|
49
|
-
|
|
50
|
-
:host(.ui-label--title-large) {
|
|
48
|
+
.ui-label--title-large {
|
|
51
49
|
font-size: 22px;
|
|
52
50
|
line-height: 28px;
|
|
53
51
|
font-weight: 400;
|
|
54
52
|
letter-spacing: 0px;
|
|
55
53
|
}
|
|
56
|
-
|
|
57
|
-
:host(.ui-label--title-medium) {
|
|
54
|
+
.ui-label--title-medium {
|
|
58
55
|
font-size: 16px;
|
|
59
56
|
line-height: 24px;
|
|
60
57
|
font-weight: 500;
|
|
61
58
|
letter-spacing: 0.15px;
|
|
62
59
|
}
|
|
63
|
-
|
|
64
|
-
:host(.ui-label--title-small) {
|
|
60
|
+
.ui-label--title-small {
|
|
65
61
|
font-size: 14px;
|
|
66
62
|
line-height: 20px;
|
|
67
63
|
font-weight: 500;
|
|
68
64
|
letter-spacing: 0.1px;
|
|
69
65
|
}
|
|
70
|
-
|
|
71
|
-
:host(.ui-label--body-large) {
|
|
66
|
+
.ui-label--body-large {
|
|
72
67
|
font-size: 16px;
|
|
73
68
|
line-height: 24px;
|
|
74
69
|
font-weight: 400;
|
|
75
70
|
letter-spacing: 0.5px;
|
|
76
71
|
}
|
|
77
|
-
|
|
78
|
-
:host(.ui-label--body-medium) {
|
|
72
|
+
.ui-label--body-medium {
|
|
79
73
|
font-size: 14px;
|
|
80
74
|
line-height: 20px;
|
|
81
75
|
font-weight: 400;
|
|
82
76
|
letter-spacing: 0.25px;
|
|
83
77
|
}
|
|
84
|
-
|
|
85
|
-
:host(.ui-label--body-small) {
|
|
78
|
+
.ui-label--body-small {
|
|
86
79
|
font-size: 12px;
|
|
87
80
|
line-height: 16px;
|
|
88
81
|
font-weight: 400;
|
|
89
82
|
letter-spacing: 0.4px;
|
|
90
83
|
}
|
|
91
|
-
|
|
92
|
-
:host(.ui-label--label-large) {
|
|
84
|
+
.ui-label--label-large {
|
|
93
85
|
font-size: 14px;
|
|
94
86
|
line-height: 20px;
|
|
95
87
|
font-weight: 500;
|
|
96
88
|
letter-spacing: 0.1px;
|
|
97
89
|
}
|
|
98
|
-
|
|
99
|
-
:host(.ui-label--label-medium) {
|
|
90
|
+
.ui-label--label-medium {
|
|
100
91
|
font-size: 12px;
|
|
101
92
|
line-height: 16px;
|
|
102
93
|
font-weight: 500;
|
|
103
94
|
letter-spacing: 0.5px;
|
|
104
95
|
}
|
|
105
|
-
|
|
106
|
-
:host(.ui-label--label-small) {
|
|
96
|
+
.ui-label--label-small {
|
|
107
97
|
font-size: 11px;
|
|
108
98
|
line-height: 16px;
|
|
109
99
|
font-weight: 500;
|
|
110
100
|
letter-spacing: 0.5px;
|
|
111
101
|
}
|
|
112
|
-
|
|
113
|
-
:
|
|
114
|
-
color: #6750A4;
|
|
102
|
+
.ui-label--color-primary {
|
|
103
|
+
color: var(--color-primary, #6750A4);
|
|
115
104
|
}
|
|
116
|
-
|
|
117
|
-
:
|
|
118
|
-
color: #FFFFFF;
|
|
105
|
+
.ui-label--color-on-primary {
|
|
106
|
+
color: var(--color-on-primary, #FFFFFF);
|
|
119
107
|
}
|
|
120
|
-
|
|
121
|
-
:
|
|
122
|
-
color: #EADDFF;
|
|
108
|
+
.ui-label--color-primary-container {
|
|
109
|
+
color: var(--color-primary-container, #EADDFF);
|
|
123
110
|
}
|
|
124
|
-
|
|
125
|
-
:
|
|
126
|
-
color: #21005D;
|
|
111
|
+
.ui-label--color-on-primary-container {
|
|
112
|
+
color: var(--color-on-primary-container, #21005D);
|
|
127
113
|
}
|
|
128
|
-
|
|
129
|
-
:
|
|
130
|
-
color: #625B71;
|
|
114
|
+
.ui-label--color-secondary {
|
|
115
|
+
color: var(--color-secondary, #625B71);
|
|
131
116
|
}
|
|
132
|
-
|
|
133
|
-
:
|
|
134
|
-
color: #FFFFFF;
|
|
117
|
+
.ui-label--color-on-secondary {
|
|
118
|
+
color: var(--color-on-secondary, #FFFFFF);
|
|
135
119
|
}
|
|
136
|
-
|
|
137
|
-
:
|
|
138
|
-
color: #E8DEF8;
|
|
120
|
+
.ui-label--color-secondary-container {
|
|
121
|
+
color: var(--color-secondary-container, #E8DEF8);
|
|
139
122
|
}
|
|
140
|
-
|
|
141
|
-
:
|
|
142
|
-
color: #1D192B;
|
|
123
|
+
.ui-label--color-on-secondary-container {
|
|
124
|
+
color: var(--color-on-secondary-container, #1D192B);
|
|
143
125
|
}
|
|
144
|
-
|
|
145
|
-
:
|
|
146
|
-
color: #7D5260;
|
|
126
|
+
.ui-label--color-tertiary {
|
|
127
|
+
color: var(--color-tertiary, #7D5260);
|
|
147
128
|
}
|
|
148
|
-
|
|
149
|
-
:
|
|
150
|
-
color: #FFFFFF;
|
|
129
|
+
.ui-label--color-on-tertiary {
|
|
130
|
+
color: var(--color-on-tertiary, #FFFFFF);
|
|
151
131
|
}
|
|
152
|
-
|
|
153
|
-
:
|
|
154
|
-
color: #FFD8E4;
|
|
132
|
+
.ui-label--color-tertiary-container {
|
|
133
|
+
color: var(--color-tertiary-container, #FFD8E4);
|
|
155
134
|
}
|
|
156
|
-
|
|
157
|
-
:
|
|
158
|
-
color: #31111D;
|
|
135
|
+
.ui-label--color-on-tertiary-container {
|
|
136
|
+
color: var(--color-on-tertiary-container, #31111D);
|
|
159
137
|
}
|
|
160
|
-
|
|
161
|
-
:
|
|
162
|
-
color: #B3261E;
|
|
138
|
+
.ui-label--color-error {
|
|
139
|
+
color: var(--color-error, #B3261E);
|
|
163
140
|
}
|
|
164
|
-
|
|
165
|
-
:
|
|
166
|
-
color: #FFFFFF;
|
|
141
|
+
.ui-label--color-on-error {
|
|
142
|
+
color: var(--color-on-error, #FFFFFF);
|
|
167
143
|
}
|
|
168
|
-
|
|
169
|
-
:
|
|
170
|
-
color: #FEF7FF;
|
|
144
|
+
.ui-label--color-surface {
|
|
145
|
+
color: var(--color-surface, #FEF7FF);
|
|
171
146
|
}
|
|
172
|
-
|
|
173
|
-
:
|
|
174
|
-
color: #1D1B20;
|
|
147
|
+
.ui-label--color-on-surface {
|
|
148
|
+
color: var(--color-on-surface, #1D1B20);
|
|
175
149
|
}
|
|
176
|
-
|
|
177
|
-
:
|
|
178
|
-
color: #49454F;
|
|
150
|
+
.ui-label--color-on-surface-variant {
|
|
151
|
+
color: var(--color-on-surface-variant, #49454F);
|
|
179
152
|
}
|
|
180
|
-
|
|
181
|
-
:
|
|
182
|
-
color: #79747E;
|
|
153
|
+
.ui-label--color-outline {
|
|
154
|
+
color: var(--color-outline, #79747E);
|
|
183
155
|
}
|
|
184
|
-
|
|
185
|
-
:host(.ui-label--weight-normal) {
|
|
156
|
+
.ui-label--weight-normal {
|
|
186
157
|
font-weight: 400;
|
|
187
158
|
}
|
|
188
|
-
|
|
189
|
-
:host(.ui-label--weight-medium) {
|
|
159
|
+
.ui-label--weight-medium {
|
|
190
160
|
font-weight: 500;
|
|
191
161
|
}
|
|
192
|
-
|
|
193
|
-
:host(.ui-label--weight-bold) {
|
|
162
|
+
.ui-label--weight-bold {
|
|
194
163
|
font-weight: 700;
|
|
195
164
|
}
|
|
196
|
-
|
|
197
|
-
:
|
|
198
|
-
font-style: italic !important;
|
|
165
|
+
.ui-label--italic {
|
|
166
|
+
font-style: italic;
|
|
199
167
|
}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class UiLabel {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.label = '';
|
|
4
5
|
this.variant = 'body-medium';
|
|
5
6
|
this.color = 'on-surface';
|
|
6
7
|
this.italic = false;
|
|
7
8
|
}
|
|
8
9
|
render() {
|
|
9
10
|
const classMap = {
|
|
11
|
+
'ui-label': true,
|
|
10
12
|
[`ui-label--${this.variant}`]: true,
|
|
11
13
|
[`ui-label--color-${this.color}`]: true,
|
|
12
14
|
[`ui-label--weight-${this.weight}`]: !!this.weight,
|
|
13
|
-
'ui-label--italic': this.italic
|
|
15
|
+
'ui-label--italic': this.italic,
|
|
14
16
|
};
|
|
15
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: '2775ed362454ba509ff4f97d6820c17b99c9f348' }, h("span", { key: '183517d9e92f5c9cceb8520d72d874b897acdc24', class: classMap }, this.label, h("slot", { key: '5e02ec614d3000e6d5876250d3710253b82d9abe' }))));
|
|
16
18
|
}
|
|
17
19
|
static get is() { return "ui-label"; }
|
|
18
20
|
static get encapsulation() { return "shadow"; }
|
|
@@ -36,7 +38,7 @@ export class UiLabel {
|
|
|
36
38
|
"resolved": "string",
|
|
37
39
|
"references": {}
|
|
38
40
|
},
|
|
39
|
-
"required":
|
|
41
|
+
"required": false,
|
|
40
42
|
"optional": false,
|
|
41
43
|
"docs": {
|
|
42
44
|
"tags": [],
|
|
@@ -45,7 +47,8 @@ export class UiLabel {
|
|
|
45
47
|
"getter": false,
|
|
46
48
|
"setter": false,
|
|
47
49
|
"reflect": false,
|
|
48
|
-
"attribute": "label"
|
|
50
|
+
"attribute": "label",
|
|
51
|
+
"defaultValue": "''"
|
|
49
52
|
},
|
|
50
53
|
"variant": {
|
|
51
54
|
"type": "string",
|
|
@@ -50,16 +50,18 @@ const meta = {
|
|
|
50
50
|
};
|
|
51
51
|
export default meta;
|
|
52
52
|
// Template base
|
|
53
|
-
const Template = (args) =>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
53
|
+
const Template = (args) => {
|
|
54
|
+
// Creamos el elemento manualmente o usamos spread de atributos
|
|
55
|
+
return html `
|
|
56
|
+
<ui-label
|
|
57
|
+
label=${args.label || ''}
|
|
58
|
+
variant=${args.variant}
|
|
59
|
+
color=${args.color}
|
|
60
|
+
.weight=${args.weight || undefined}
|
|
61
|
+
?italic=${args.italic}
|
|
62
|
+
></ui-label>
|
|
63
|
+
`;
|
|
64
|
+
};
|
|
63
65
|
// Historia Playground
|
|
64
66
|
export const Playground = {
|
|
65
67
|
render: Template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as l,H as
|
|
1
|
+
import{t as e,p as l,H as o,h as i,a as t}from"./index.js";const r=l(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.label="",this.variant="body-medium",this.color="on-surface",this.italic=!1}render(){return i(t,{key:"2775ed362454ba509ff4f97d6820c17b99c9f348"},i("span",{key:"183517d9e92f5c9cceb8520d72d874b897acdc24",class:{"ui-label":!0,["ui-label--"+this.variant]:!0,["ui-label--color-"+this.color]:!0,["ui-label--weight-"+this.weight]:!!this.weight,"ui-label--italic":this.italic}},this.label,i("slot",{key:"5e02ec614d3000e6d5876250d3710253b82d9abe"})))}static get style(){return':host{display:inline-block}.ui-label{color:inherit;margin:0;padding:0;font-family:"Roboto", system-ui, -apple-system, sans-serif;transition:color 0.2s ease-in-out}.ui-label--display-large{font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}.ui-label--display-medium{font-size:45px;line-height:52px;font-weight:400;letter-spacing:0px}.ui-label--display-small{font-size:36px;line-height:44px;font-weight:400;letter-spacing:0px}.ui-label--headline-large{font-size:32px;line-height:40px;font-weight:400;letter-spacing:0px}.ui-label--headline-medium{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0px}.ui-label--headline-small{font-size:24px;line-height:32px;font-weight:400;letter-spacing:0px}.ui-label--title-large{font-size:22px;line-height:28px;font-weight:400;letter-spacing:0px}.ui-label--title-medium{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}.ui-label--title-small{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--body-large{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}.ui-label--body-medium{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}.ui-label--body-small{font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}.ui-label--label-large{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--label-medium{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--label-small{font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--color-primary{color:var(--color-primary, #6750A4)}.ui-label--color-on-primary{color:var(--color-on-primary, #FFFFFF)}.ui-label--color-primary-container{color:var(--color-primary-container, #EADDFF)}.ui-label--color-on-primary-container{color:var(--color-on-primary-container, #21005D)}.ui-label--color-secondary{color:var(--color-secondary, #625B71)}.ui-label--color-on-secondary{color:var(--color-on-secondary, #FFFFFF)}.ui-label--color-secondary-container{color:var(--color-secondary-container, #E8DEF8)}.ui-label--color-on-secondary-container{color:var(--color-on-secondary-container, #1D192B)}.ui-label--color-tertiary{color:var(--color-tertiary, #7D5260)}.ui-label--color-on-tertiary{color:var(--color-on-tertiary, #FFFFFF)}.ui-label--color-tertiary-container{color:var(--color-tertiary-container, #FFD8E4)}.ui-label--color-on-tertiary-container{color:var(--color-on-tertiary-container, #31111D)}.ui-label--color-error{color:var(--color-error, #B3261E)}.ui-label--color-on-error{color:var(--color-on-error, #FFFFFF)}.ui-label--color-surface{color:var(--color-surface, #FEF7FF)}.ui-label--color-on-surface{color:var(--color-on-surface, #1D1B20)}.ui-label--color-on-surface-variant{color:var(--color-on-surface-variant, #49454F)}.ui-label--color-outline{color:var(--color-outline, #79747E)}.ui-label--weight-normal{font-weight:400}.ui-label--weight-medium{font-weight:500}.ui-label--weight-bold{font-weight:700}.ui-label--italic{font-style:italic}'}},[257,"ui-label",{label:[1],variant:[1],color:[1],weight:[1],italic:[4]}]);function a(){"undefined"!=typeof customElements&&["ui-label"].forEach((l=>{"ui-label"===l&&(customElements.get(e(l))||customElements.define(e(l),r))}))}a();const n=r,c=a;export{n as UiLabel,c as defineCustomElement}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-DuNnHYm7.js';
|
|
2
2
|
|
|
3
|
-
const uiLabelCss = () => `:host{display:inline-block;font-family:"Roboto", system-ui, -apple-system, sans-serif;
|
|
3
|
+
const uiLabelCss = () => `:host{display:inline-block}.ui-label{color:inherit;margin:0;padding:0;font-family:"Roboto", system-ui, -apple-system, sans-serif;transition:color 0.2s ease-in-out}.ui-label--display-large{font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}.ui-label--display-medium{font-size:45px;line-height:52px;font-weight:400;letter-spacing:0px}.ui-label--display-small{font-size:36px;line-height:44px;font-weight:400;letter-spacing:0px}.ui-label--headline-large{font-size:32px;line-height:40px;font-weight:400;letter-spacing:0px}.ui-label--headline-medium{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0px}.ui-label--headline-small{font-size:24px;line-height:32px;font-weight:400;letter-spacing:0px}.ui-label--title-large{font-size:22px;line-height:28px;font-weight:400;letter-spacing:0px}.ui-label--title-medium{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}.ui-label--title-small{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--body-large{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}.ui-label--body-medium{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}.ui-label--body-small{font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}.ui-label--label-large{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--label-medium{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--label-small{font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--color-primary{color:var(--color-primary, #6750A4)}.ui-label--color-on-primary{color:var(--color-on-primary, #FFFFFF)}.ui-label--color-primary-container{color:var(--color-primary-container, #EADDFF)}.ui-label--color-on-primary-container{color:var(--color-on-primary-container, #21005D)}.ui-label--color-secondary{color:var(--color-secondary, #625B71)}.ui-label--color-on-secondary{color:var(--color-on-secondary, #FFFFFF)}.ui-label--color-secondary-container{color:var(--color-secondary-container, #E8DEF8)}.ui-label--color-on-secondary-container{color:var(--color-on-secondary-container, #1D192B)}.ui-label--color-tertiary{color:var(--color-tertiary, #7D5260)}.ui-label--color-on-tertiary{color:var(--color-on-tertiary, #FFFFFF)}.ui-label--color-tertiary-container{color:var(--color-tertiary-container, #FFD8E4)}.ui-label--color-on-tertiary-container{color:var(--color-on-tertiary-container, #31111D)}.ui-label--color-error{color:var(--color-error, #B3261E)}.ui-label--color-on-error{color:var(--color-on-error, #FFFFFF)}.ui-label--color-surface{color:var(--color-surface, #FEF7FF)}.ui-label--color-on-surface{color:var(--color-on-surface, #1D1B20)}.ui-label--color-on-surface-variant{color:var(--color-on-surface-variant, #49454F)}.ui-label--color-outline{color:var(--color-outline, #79747E)}.ui-label--weight-normal{font-weight:400}.ui-label--weight-medium{font-weight:500}.ui-label--weight-bold{font-weight:700}.ui-label--italic{font-style:italic}`;
|
|
4
4
|
|
|
5
5
|
const UiLabel = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
|
+
this.label = '';
|
|
8
9
|
this.variant = 'body-medium';
|
|
9
10
|
this.color = 'on-surface';
|
|
10
11
|
this.italic = false;
|
|
11
12
|
}
|
|
12
13
|
render() {
|
|
13
14
|
const classMap = {
|
|
15
|
+
'ui-label': true,
|
|
14
16
|
[`ui-label--${this.variant}`]: true,
|
|
15
17
|
[`ui-label--color-${this.color}`]: true,
|
|
16
18
|
[`ui-label--weight-${this.weight}`]: !!this.weight,
|
|
17
|
-
'ui-label--italic': this.italic
|
|
19
|
+
'ui-label--italic': this.italic,
|
|
18
20
|
};
|
|
19
|
-
return (h(Host, { key: '
|
|
21
|
+
return (h(Host, { key: '2775ed362454ba509ff4f97d6820c17b99c9f348' }, h("span", { key: '183517d9e92f5c9cceb8520d72d874b897acdc24', class: classMap }, this.label, h("slot", { key: '5e02ec614d3000e6d5876250d3710253b82d9abe' }))));
|
|
20
22
|
}
|
|
21
23
|
};
|
|
22
24
|
UiLabel.style = uiLabelCss();
|
|
@@ -17,6 +17,9 @@ export namespace Components {
|
|
|
17
17
|
* @default false
|
|
18
18
|
*/
|
|
19
19
|
"italic": boolean;
|
|
20
|
+
/**
|
|
21
|
+
* @default ''
|
|
22
|
+
*/
|
|
20
23
|
"label": string;
|
|
21
24
|
/**
|
|
22
25
|
* @default 'body-medium'
|
|
@@ -46,7 +49,10 @@ declare namespace LocalJSX {
|
|
|
46
49
|
* @default false
|
|
47
50
|
*/
|
|
48
51
|
"italic"?: boolean;
|
|
49
|
-
|
|
52
|
+
/**
|
|
53
|
+
* @default ''
|
|
54
|
+
*/
|
|
55
|
+
"label"?: string;
|
|
50
56
|
/**
|
|
51
57
|
* @default 'body-medium'
|
|
52
58
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,h as l,H as o}from"./p-DuNnHYm7.js";const i=class{constructor(l){e(this,l),this.label="",this.variant="body-medium",this.color="on-surface",this.italic=!1}render(){return l(o,{key:"2775ed362454ba509ff4f97d6820c17b99c9f348"},l("span",{key:"183517d9e92f5c9cceb8520d72d874b897acdc24",class:{"ui-label":!0,[`ui-label--${this.variant}`]:!0,[`ui-label--color-${this.color}`]:!0,[`ui-label--weight-${this.weight}`]:!!this.weight,"ui-label--italic":this.italic}},this.label,l("slot",{key:"5e02ec614d3000e6d5876250d3710253b82d9abe"})))}};i.style=':host{display:inline-block}.ui-label{color:inherit;margin:0;padding:0;font-family:"Roboto", system-ui, -apple-system, sans-serif;transition:color 0.2s ease-in-out}.ui-label--display-large{font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}.ui-label--display-medium{font-size:45px;line-height:52px;font-weight:400;letter-spacing:0px}.ui-label--display-small{font-size:36px;line-height:44px;font-weight:400;letter-spacing:0px}.ui-label--headline-large{font-size:32px;line-height:40px;font-weight:400;letter-spacing:0px}.ui-label--headline-medium{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0px}.ui-label--headline-small{font-size:24px;line-height:32px;font-weight:400;letter-spacing:0px}.ui-label--title-large{font-size:22px;line-height:28px;font-weight:400;letter-spacing:0px}.ui-label--title-medium{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}.ui-label--title-small{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--body-large{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}.ui-label--body-medium{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}.ui-label--body-small{font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}.ui-label--label-large{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}.ui-label--label-medium{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--label-small{font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}.ui-label--color-primary{color:var(--color-primary, #6750A4)}.ui-label--color-on-primary{color:var(--color-on-primary, #FFFFFF)}.ui-label--color-primary-container{color:var(--color-primary-container, #EADDFF)}.ui-label--color-on-primary-container{color:var(--color-on-primary-container, #21005D)}.ui-label--color-secondary{color:var(--color-secondary, #625B71)}.ui-label--color-on-secondary{color:var(--color-on-secondary, #FFFFFF)}.ui-label--color-secondary-container{color:var(--color-secondary-container, #E8DEF8)}.ui-label--color-on-secondary-container{color:var(--color-on-secondary-container, #1D192B)}.ui-label--color-tertiary{color:var(--color-tertiary, #7D5260)}.ui-label--color-on-tertiary{color:var(--color-on-tertiary, #FFFFFF)}.ui-label--color-tertiary-container{color:var(--color-tertiary-container, #FFD8E4)}.ui-label--color-on-tertiary-container{color:var(--color-on-tertiary-container, #31111D)}.ui-label--color-error{color:var(--color-error, #B3261E)}.ui-label--color-on-error{color:var(--color-on-error, #FFFFFF)}.ui-label--color-surface{color:var(--color-surface, #FEF7FF)}.ui-label--color-on-surface{color:var(--color-on-surface, #1D1B20)}.ui-label--color-on-surface-variant{color:var(--color-on-surface-variant, #49454F)}.ui-label--color-outline{color:var(--color-outline, #79747E)}.ui-label--weight-normal{font-weight:400}.ui-label--weight-medium{font-weight:500}.ui-label--weight-bold{font-weight:700}.ui-label--italic{font-style:italic}';export{i as ui_label}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,g as t,b as e}from"./p-DuNnHYm7.js";export{s as setNonce}from"./p-DuNnHYm7.js";(()=>{const t=import.meta.url,e={};return""!==t&&(e.resourcesUrl=new URL(".",t).href),a(e)})().then((async a=>(await t(),e([["p-
|
|
1
|
+
import{p as a,g as t,b as e}from"./p-DuNnHYm7.js";export{s as setNonce}from"./p-DuNnHYm7.js";(()=>{const t=import.meta.url,e={};return""!==t&&(e.resourcesUrl=new URL(".",t).href),a(e)})().then((async a=>(await t(),e([["p-cc5e537f",[[257,"ui-label",{label:[1],variant:[1],color:[1],weight:[1],italic:[4]}]]]],a))));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@re-code/ui-components",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Stencil
|
|
3
|
+
"version": "0.0.7",
|
|
4
|
+
"description": "Stencil Components for a white label project",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
7
|
"es2015": "dist/esm/index.mjs",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,h as l,H as o}from"./p-DuNnHYm7.js";const t=class{constructor(l){e(this,l),this.variant="body-medium",this.color="on-surface",this.italic=!1}render(){return l(o,{key:"f27dfd1b6693b5728b941dd191d2314c68b2ac82",class:{[`ui-label--${this.variant}`]:!0,[`ui-label--color-${this.color}`]:!0,[`ui-label--weight-${this.weight}`]:!!this.weight,"ui-label--italic":this.italic}},l("span",{key:"cbf3de59fc8bc1a2c47c5de5570990deb595d06b"},this.label," ",l("slot",{key:"6bf134e3df5360475a1c49891c923556114288d7"})))}};t.style=':host{display:inline-block;font-family:"Roboto", system-ui, -apple-system, sans-serif;color:#1D1B20;transition:all 0.2s ease-in-out}:host(.ui-label--display-large){font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}:host(.ui-label--display-medium){font-size:45px;line-height:52px;font-weight:400;letter-spacing:0px}:host(.ui-label--display-small){font-size:36px;line-height:44px;font-weight:400;letter-spacing:0px}:host(.ui-label--headline-large){font-size:32px;line-height:40px;font-weight:400;letter-spacing:0px}:host(.ui-label--headline-medium){font-size:28px;line-height:36px;font-weight:400;letter-spacing:0px}:host(.ui-label--headline-small){font-size:24px;line-height:32px;font-weight:400;letter-spacing:0px}:host(.ui-label--title-large){font-size:22px;line-height:28px;font-weight:400;letter-spacing:0px}:host(.ui-label--title-medium){font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}:host(.ui-label--title-small){font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}:host(.ui-label--body-large){font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}:host(.ui-label--body-medium){font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}:host(.ui-label--body-small){font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}:host(.ui-label--label-large){font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}:host(.ui-label--label-medium){font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}:host(.ui-label--label-small){font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}:host(.ui-label--color-primary){color:#6750A4}:host(.ui-label--color-on-primary){color:#FFFFFF}:host(.ui-label--color-primary-container){color:#EADDFF}:host(.ui-label--color-on-primary-container){color:#21005D}:host(.ui-label--color-secondary){color:#625B71}:host(.ui-label--color-on-secondary){color:#FFFFFF}:host(.ui-label--color-secondary-container){color:#E8DEF8}:host(.ui-label--color-on-secondary-container){color:#1D192B}:host(.ui-label--color-tertiary){color:#7D5260}:host(.ui-label--color-on-tertiary){color:#FFFFFF}:host(.ui-label--color-tertiary-container){color:#FFD8E4}:host(.ui-label--color-on-tertiary-container){color:#31111D}:host(.ui-label--color-error){color:#B3261E}:host(.ui-label--color-on-error){color:#FFFFFF}:host(.ui-label--color-surface){color:#FEF7FF}:host(.ui-label--color-on-surface){color:#1D1B20}:host(.ui-label--color-on-surface-variant){color:#49454F}:host(.ui-label--color-outline){color:#79747E}:host(.ui-label--weight-normal){font-weight:400}:host(.ui-label--weight-medium){font-weight:500}:host(.ui-label--weight-bold){font-weight:700}:host(.ui-label--italic){font-style:italic !important}';export{t as ui_label}
|