@latitude-ui/widgets 0.0.1 → 0.0.2

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.
Files changed (9) hide show
  1. package/package.json +6 -8
  2. package/styles/_colors.scss +99 -0
  3. package/styles/_defaults.scss +122 -0
  4. package/styles/_typography.scss +37 -0
  5. package/styles/button/_index.scss +199 -0
  6. package/styles/forms/_index.scss +834 -0
  7. package/styles/icons/_index.scss +34 -0
  8. package/styles/list/_index.scss +0 -0
  9. package/styles/listbox/_index.scss +30 -0
package/package.json CHANGED
@@ -1,11 +1,9 @@
1
1
  {
2
2
  "name": "@latitude-ui/widgets",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "sideEffects": false,
5
- "description": "Angular components widgets",
5
+ "description": "UI Widgets",
6
6
  "keywords": [
7
- "angular",
8
- "service",
9
7
  "component",
10
8
  "directive"
11
9
  ],
@@ -66,13 +64,13 @@
66
64
  "types": "./textarea/latitude-ui-widgets-textarea.d.ts",
67
65
  "default": "./esm2022/textarea/latitude-ui-widgets-textarea.js"
68
66
  },
69
- "./textbox-number": {
70
- "types": "./textbox-number/latitude-ui-widgets-textbox-number.d.ts",
71
- "default": "./esm2022/textbox-number/latitude-ui-widgets-textbox-number.js"
72
- },
73
67
  "./textbox": {
74
68
  "types": "./textbox/latitude-ui-widgets-textbox.d.ts",
75
69
  "default": "./esm2022/textbox/latitude-ui-widgets-textbox.js"
70
+ },
71
+ "./textbox-number": {
72
+ "types": "./textbox-number/latitude-ui-widgets-textbox-number.d.ts",
73
+ "default": "./esm2022/textbox-number/latitude-ui-widgets-textbox-number.js"
76
74
  }
77
75
  },
78
76
  "peerDependencies": {
package/styles/_colors.scss ADDED
@@ -0,0 +1,99 @@
1
+ $icon-color: #6d6e6f !default;
2
+ $icon-color-hover: #1e1f21 !default;
3
+ $icon-color-active: #1e1f21 !default;
4
+ $icon-color-strong: #6d6e6f !default;
5
+ $icon-color-disabled: #afabac !default;
6
+ $icon-color-foreground: #ffffff !default;
7
+
8
+ $text-color: #1e1f21 !default;
9
+ $text-color-strong: #555555 !default;
10
+ $text-color-subtle: #6d6e6f !default;
11
+ $text-color-subtle-hover: #1e1f21 !default;
12
+ $text-color-disabled: #afabac !default;
13
+ $text-color-foreground: #ffffff !default;
14
+
15
+ $shadow-color: rgba(109, 110, 111, .1) !default;
16
+ $shadow-color-weak: rgba(109, 110, 111, .08) !default;
17
+ $shadow-color-strong: rgba(109, 110, 111, .12) !default;
18
+
19
+ $outline-color: #edeae9 !default;
20
+ $outline-color-hover: #afabac !default;
21
+ $outline-color-active: #6d6e6f !default;
22
+ $outline-color-strong: #cfcbcb !default;
23
+
24
+ $background-color: #ffffff !default;
25
+ $background-color-hover: rgba(55, 23, 23, .03) !default;
26
+ $background-color-active: rgba(55, 23, 23, .05) !default;
27
+ $background-color-strong: #f5f3f3 !default;
28
+ $background-color-subtle: #f9f8f8 !default;
29
+ $background-color-subtle-hover: rgba(55, 23, 23, .05) !default;
30
+ $background-color-subtle-active: rgba(55, 23, 23, .06) !default;
31
+
32
+ $primary-color: #4573d2 !default;
33
+ $primary-color-hover: #426dc6 !default;
34
+ $primary-color-active: #3f66ba !default;
35
+
36
+ $primary-color-weak: #f1f2fc !default;
37
+ $primary-color-weak-hover: #e7e9fc !default;
38
+ $primary-color-weak-active: #dbe0fd !default;
39
+
40
+ $danger-color: #fa5252 !default;
41
+ $danger-color-hover: #fa5252 !default;
42
+ $danger-color-active: #fa5252 !default;
43
+
44
+ $box-shadow-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, .08);
45
+ $box-shadow-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, .1);
46
+ $box-shadow-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, .1);
47
+ $box-shadow-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, .1);
48
+ $box-shadow-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, .12);
49
+
50
+ :root {
51
+ --lat-icon-color: #{$icon-color};
52
+ --lat-icon-color-hover: #{$icon-color-hover};
53
+ --lat-icon-color-active: #{$icon-color-active};
54
+ --lat-icon-color-strong: #{$icon-color-strong};
55
+ --lat-icon-color-disabled: #{$icon-color-disabled};
56
+ --lat-icon-color-foreground: #{$icon-color-foreground};
57
+
58
+ --lat-text-color: #{$text-color};
59
+ --lat-text-color-strong: #{$text-color-strong};
60
+ --lat-text-color-subtle: #{$text-color-subtle};
61
+ --lat-text-color-subtle-hover: #{$text-color-subtle-hover};
62
+ --lat-text-color-disabled: #{$text-color-disabled};
63
+ --lat-text-color-foreground: #{$text-color-foreground};
64
+
65
+ --lat-shadow-color: #{$shadow-color};
66
+ --lat-shadow-color-weak: #{$shadow-color-weak};
67
+ --lat-shadow-color-strong: #{$shadow-color-strong};
68
+
69
+ --lat-outline-color: #{$outline-color};
70
+ --lat-outline-color-hover: #{$outline-color-hover};
71
+ --lat-outline-color-active: #{$outline-color-active};
72
+ --lat-outline-color-strong: #{$outline-color-strong};
73
+
74
+ --lat-background-color: #{$background-color};
75
+ --lat-background-color-hover: #{$background-color-hover};
76
+ --lat-background-color-active: #{$background-color-active};
77
+ --lat-background-color-strong: #{$background-color-strong};
78
+ --lat-background-color-subtle: #{$background-color-subtle};
79
+ --lat-background-color-subtle-hover: #{$background-color-subtle-hover};
80
+ --lat-background-color-subtle-active: #{$background-color-subtle-active};
81
+
82
+ --lat-primary-color: #{$primary-color};
83
+ --lat-primary-color-hover: #{$primary-color-hover};
84
+ --lat-primary-color-active: #{$primary-color-active};
85
+
86
+ --lat-primary-color-weak: #{$primary-color-weak};
87
+ --lat-primary-color-weak-hover: #{$primary-color-weak-hover};
88
+ --lat-primary-color-weak-active: #{$primary-color-weak-active};
89
+
90
+ --lat-danger-color: #{$danger-color};
91
+ --lat-danger-color-hover: #{$danger-color-hover};
92
+ --lat-danger-color-active: #{$danger-color-active};
93
+
94
+ --lat-box-shadow-small: #{$box-shadow-small};
95
+ --lat-box-shadow-medium: #{$box-shadow-medium};
96
+ --lat-box-shadow-medium-hover: #{$box-shadow-medium-hover};
97
+ --lat-box-shadow-medium-active: #{$box-shadow-medium-active};
98
+ --lat-box-shadow-large: #{$box-shadow-large};
99
+ }
package/styles/_defaults.scss ADDED
@@ -0,0 +1,122 @@
1
+
2
+
3
+ *,
4
+ ::before,
5
+ ::after {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ html {
10
+ font-family: var(--lat-font-family-sans, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'), sans-serif;
11
+
12
+ font-size: 16px;
13
+ font-weight: var(--lat-font-weight-normal, 450);
14
+ line-height: 24px;
15
+
16
+ -webkit-text-size-adjust: 100%;
17
+ tab-size: 4;
18
+ }
19
+
20
+
21
+ body {
22
+ margin: 0;
23
+ }
24
+
25
+ b,
26
+ strong {
27
+ font-weight: bolder;
28
+ }
29
+
30
+
31
+ code,
32
+ kbd,
33
+ samp,
34
+ pre {
35
+ font-family: var(--lat-font-famiy-monospace, ui-monospace, SFMono-Regular, inherit Consolas, 'Liberation Mono', Menlo), monospace;
36
+ font-size: 1em;
37
+ }
38
+
39
+
40
+ small {
41
+ font-size: 80%;
42
+ }
43
+
44
+
45
+ sub,
46
+ sup {
47
+ font-size: 75%;
48
+ line-height: 0;
49
+ position: relative;
50
+ vertical-align: baseline;
51
+ }
52
+
53
+ sub {
54
+ bottom: -0.25em;
55
+ }
56
+
57
+ sup {
58
+ top: -0.5em;
59
+ }
60
+
61
+
62
+ table {
63
+ border-color: currentcolor;
64
+ }
65
+
66
+
67
+ button,
68
+ input,
69
+ optgroup,
70
+ select,
71
+ textarea {
72
+ font-family: inherit;
73
+ font-size: 100%;
74
+ line-height: 1.15;
75
+ margin: 0;
76
+ }
77
+
78
+
79
+ button,
80
+ [type='button'],
81
+ [type='reset'],
82
+ [type='submit'] {
83
+ -webkit-appearance: button;
84
+ }
85
+
86
+
87
+ legend {
88
+ padding: 0;
89
+ }
90
+
91
+
92
+ progress {
93
+ vertical-align: baseline;
94
+ }
95
+
96
+
97
+ ::-webkit-inner-spin-button,
98
+ ::-webkit-outer-spin-button {
99
+ height: auto;
100
+ }
101
+
102
+
103
+ [type='search'] {
104
+ -webkit-appearance: textfield;
105
+ outline-offset: -2px;
106
+ }
107
+
108
+
109
+ ::-webkit-search-decoration {
110
+ -webkit-appearance: none;
111
+ }
112
+
113
+
114
+ ::-webkit-file-upload-button {
115
+ -webkit-appearance: button;
116
+ font: inherit;
117
+ }
118
+
119
+
120
+ summary {
121
+ display: list-item;
122
+ }
package/styles/_typography.scss ADDED
@@ -0,0 +1,37 @@
1
+ $font-family-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !default;
2
+ $font-family-monospace: "Berkeley Mono", "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
3
+
4
+ $font-size-tiny: 0.625rem !default;
5
+ $font-size-small: 0.75rem !default;
6
+ $font-size-normal: 0.875rem !default;
7
+ $font-size-medium: 1rem !default;
8
+ $font-size-large: 1.25rem !default;
9
+
10
+ $font-weight-light: 300 !default;
11
+ $font-weight-normal: 400 !default;
12
+ $font-weight-medium: 500 !default;
13
+ $font-weight-semibold: 600 !default;
14
+ $font-weight-bold: 700 !default;
15
+
16
+
17
+ :root {
18
+ --lat-font-family-sans: #{$font-family-sans};
19
+ --lat-font-family-monospace: #{$font-family-monospace};
20
+
21
+ --lat-font-size-tiny: #{$font-size-tiny};
22
+ --lat-font-size-small: #{$font-size-small};
23
+ --lat-font-size-normal: #{$font-size-normal};
24
+ --lat-font-size-medium: #{$font-size-medium};
25
+ --lat-font-size-large: #{$font-size-large};
26
+
27
+ --lat-font-weight-light: #{$font-weight-light};
28
+ --lat-font-weight-normal: #{$font-weight-normal};
29
+ --lat-font-weight-medium: #{$font-weight-medium};
30
+ --lat-font-weight-semibold: #{$font-weight-semibold};
31
+ --lat-font-weight-bold: #{$font-weight-bold};
32
+
33
+ --lat-font-size: var(--lat-font-size-medium);
34
+ --lat-font-family: var(--lat-font-family-sans);
35
+ --lat-font-weight: var(--lat-font-weight-normal);
36
+
37
+ }
package/styles/button/_index.scss ADDED
@@ -0,0 +1,199 @@
1
+
2
+ lat-button {
3
+ overflow: hidden;
4
+ position: relative;
5
+
6
+ box-sizing: border-box;
7
+
8
+ display: inline-flex;
9
+
10
+ gap: 4px;
11
+ flex-shrink: 0;
12
+
13
+ align-items: center;
14
+ justify-content: center;
15
+
16
+ margin: 0;
17
+ padding: 0;
18
+
19
+ outline: none;
20
+
21
+ cursor: pointer;
22
+ user-select: none;
23
+ white-space: nowrap;
24
+ vertical-align: top;
25
+ text-decoration: none;
26
+ touch-action: manipulation;
27
+
28
+ border-width: 0;
29
+ border-color: transparent;
30
+ border-style: solid;
31
+ border-radius: 4px;
32
+
33
+ font-family: var(--lat-font-family-sans), sans-serif;
34
+ font-weight: var(--lat-font-weight-normal);
35
+ line-height: normal;
36
+
37
+ transition-property: background, border, color, fill, opacity;
38
+ transition-duration: 0.2s;
39
+
40
+ &[data-size] {
41
+ height: var(--lat-button-height);
42
+ padding: var(--lat-button-padding);
43
+ font-size: var(--lat-button-font-size);
44
+ line-height: var(--lat-button-line-height);
45
+ }
46
+
47
+ &[data-onlyicon="true"] {
48
+ width: var(--lat-button-height);
49
+ min-width: var(--lat-button-height);
50
+ }
51
+
52
+ &[data-size="sm"] {
53
+ --lat-button-height: 24px;
54
+ --lat-button-padding: 0 8px;
55
+ --lat-button-font-size: 12px;
56
+ --lat-button-line-height: 24px;
57
+ }
58
+
59
+ &[data-size="md"] {
60
+ --lat-button-height: 28px;
61
+ --lat-button-padding: 0 8px;
62
+ --lat-button-font-size: 12px;
63
+ --lat-button-line-height: 28px;
64
+ }
65
+
66
+ &[data-size="lg"] {
67
+ --lat-button-height: 32px;
68
+ --lat-button-padding: 0 10px;
69
+ --lat-button-font-size: 14px;
70
+ --lat-button-line-height: 32px;
71
+ }
72
+
73
+ &[data-variant="action"] {
74
+ fill: #ffffff;
75
+ color: #ffffff;
76
+ border-width: 1px;
77
+ border-style: solid;
78
+ border-color: var(--lat-primary-color);
79
+ background-color: var(--lat-primary-color);
80
+
81
+ &:hover {
82
+ fill: #ffffff;
83
+ color: #ffffff;
84
+ border-color: var(--lat-primary-color-hover);
85
+ background-color: var(--lat-primary-color-hover);
86
+ }
87
+
88
+ &:active {
89
+ fill: #ffffff;
90
+ color: #ffffff;
91
+ border-color: var(--lat-primary-color-active);
92
+ background-color: var(--lat-primary-color-active);
93
+ }
94
+
95
+ &:focus-visible {
96
+ }
97
+ }
98
+
99
+ &[data-variant="default"] {
100
+ fill: var(--lat-icon-color);
101
+ color: var(--lat-text-color);
102
+ border-width: 1px;
103
+ border-style: solid;
104
+ border-color: var(--lat-outline-color-strong);
105
+ background-color: #ffffff;
106
+
107
+ &:hover {
108
+ fill: var(--lat-icon-hover);
109
+ color: var(--lat-text-color);
110
+ border-color: var(--lat-outline-color-hover);
111
+ background-color: var(--lat-background-color-subtle);
112
+ }
113
+
114
+ &:active {
115
+ fill: var(--lat-icon-hover);
116
+ color: var(--lat-text-color);
117
+ border-color: var(--lat-outline-color-active);
118
+ background-color: var(--lat-background-color-strong);
119
+ }
120
+
121
+ &:focus-visible {
122
+ }
123
+ }
124
+
125
+ &[data-variant="text"] {
126
+ fill: var(--lat-text-color);
127
+ color: var(--lat-text-color);
128
+ border-color: transparent;
129
+ background-color: transparent;
130
+
131
+ &:hover {
132
+ fill: var(--lat-text-color);
133
+ color: var(--lat-text-color);
134
+ border-color: var(--lat-background-color-hover);
135
+ background-color: var(--lat-background-color-hover);
136
+ }
137
+
138
+ &:active {
139
+ fill: var(--lat-text-color);
140
+ color: var(--lat-text-color);
141
+ border-color: var(--lat-background-color-active);
142
+ background-color: var(--lat-background-color-active);
143
+ }
144
+
145
+ &:focus-visible {
146
+ }
147
+ }
148
+
149
+ &[data-variant="subtle"] {
150
+ fill: var(--lat-text-color-subtle);
151
+ color: var(--lat-text-color-subtle);
152
+ border-color: transparent;
153
+ background-color: transparent;
154
+
155
+ &:hover {
156
+ fill: var(--lat-text-color);
157
+ color: var(--lat-text-color);
158
+ border-color: var(--lat-background-color-subtle-hover);
159
+ background-color: var(--lat-background-color-subtle-hover);
160
+ }
161
+
162
+ &:active {
163
+ fill: var(--lat-text-color);
164
+ color: var(--lat-text-color);
165
+ border-color: var(--lat-background-color-subtle-active);
166
+ background-color: var(--lat-background-color-subtle-active);
167
+ }
168
+
169
+ &:focus-visible {
170
+ }
171
+ }
172
+
173
+ &[data-variant="danger"] {
174
+
175
+ }
176
+
177
+ &[data-variant="success"] {
178
+
179
+ }
180
+
181
+ &[aria-disabled="true"] {
182
+ cursor: not-allowed;
183
+
184
+ fill: var(--lat-text-color-disabled);
185
+ color: var(--lat-text-color-disabled);
186
+ background: #ffffff;
187
+ border-color: var(--lat-outline-color);
188
+
189
+ &:hover,
190
+ &:active,
191
+ &:focus-visible {
192
+ fill: var(--lat-text-color-disabled);
193
+ color: var(--lat-text-color-disabled);
194
+ background: #ffffff;
195
+ border-color: var(--lat-outline-color);
196
+ }
197
+ }
198
+
199
+ }
package/styles/forms/_index.scss ADDED
@@ -0,0 +1,834 @@
1
+ lat-input-label {
2
+ color: var(--lat-text-color-subtle);
3
+ //color: var(--lat-text-color-strong);
4
+
5
+ font-size: var(--lat-font-size-small);
6
+ font-family: var(--lat-font-family-sans), sans-serif;
7
+ font-weight: var(--lat-font-weight-normal);
8
+
9
+ user-select: none;
10
+ line-height: 1rem;
11
+
12
+
13
+ label {
14
+ display: inline-flex;
15
+
16
+ align-self: flex-start;
17
+ align-items: center;
18
+ justify-self: start;
19
+
20
+ color: inherit;
21
+ text-align: right;
22
+ line-height: inherit;
23
+ vertical-align: middle;
24
+
25
+ font-size: inherit;
26
+ font-family: inherit;
27
+ font-weight: inherit;
28
+
29
+ .lat-label-asterix {
30
+ color: var(--lat-danger-color);
31
+ margin-left: 4px;
32
+ }
33
+ }
34
+ }
35
+
36
+
37
+ lat-input {
38
+ display: flex;
39
+
40
+ gap: 4px;
41
+ flex-direction: column;
42
+
43
+ align-items: flex-start;
44
+ justify-content: flex-start;
45
+
46
+ font-family: var(--lat-font-family-sans), sans-serif;
47
+ font-weight: var(--lat-font-weight-normal);
48
+
49
+ line-height: normal;
50
+
51
+ & > div[role="textbox"] {
52
+ position: relative;
53
+
54
+ overflow: hidden;
55
+ box-sizing: border-box;
56
+
57
+ margin-inline: calc(0.25rem * -1);
58
+
59
+ button {
60
+ position: relative;
61
+
62
+ box-sizing: border-box;
63
+
64
+ display: flex;
65
+
66
+ align-items: center;
67
+ justify-content: flex-start;
68
+
69
+ width: 100%;
70
+
71
+ height: auto;
72
+ min-height: 28px;
73
+ line-height: 28px;
74
+
75
+ cursor: default;
76
+
77
+ text-align: left;
78
+ touch-action: manipulation;
79
+
80
+ border-radius: 4px;
81
+
82
+ padding-block: 0.25rem;
83
+ padding-inline: 0.25rem;
84
+
85
+ color: var(--lat-text-color);
86
+ background-color: transparent;
87
+
88
+ font-size: inherit;
89
+ font-family: inherit;
90
+ font-weight: inherit;
91
+
92
+ &:hover {
93
+ color: var(--lat-text-color);
94
+ background-color: var(--lat-background-color-active);
95
+ }
96
+
97
+ transition-property: background, border, color, fill, opacity;
98
+ transition-duration: 0.2s;
99
+ }
100
+ }
101
+
102
+ & > * {
103
+ width: 100%;
104
+ }
105
+
106
+ lat-input-label {
107
+ }
108
+
109
+ lat-input-error {
110
+ display: flex;
111
+
112
+ cursor: default;
113
+ flex-direction: column;
114
+
115
+ align-items: flex-start;
116
+
117
+ gap: 4px;
118
+
119
+ color: var(--lat-danger-color);
120
+ text-align: right;
121
+ line-height: inherit;
122
+ vertical-align: middle;
123
+
124
+ font-size: 11px;
125
+ font-family: inherit;
126
+ font-weight: inherit;
127
+ }
128
+ }
129
+
130
+ lat-switch {
131
+ display: inline-flex;
132
+
133
+ cursor: default;
134
+
135
+ align-items: center;
136
+ justify-content: flex-start;
137
+
138
+ font-family: var(--lat-font-family-sans), sans-serif;
139
+ font-weight: var(--lat-font-weight-normal);
140
+
141
+ &[data-size="sm"] {
142
+ height: 24px;
143
+ font-size: 12px;
144
+ line-height: 24px;
145
+
146
+ button {
147
+ width: 32px;
148
+ height: 18px;
149
+ line-height: 18px;
150
+
151
+ & > div {
152
+ width: 14px;
153
+ height: 14px;
154
+ }
155
+
156
+ &[aria-checked="true"] {
157
+ --lat-translate-x: 14px;
158
+ }
159
+
160
+ &[aria-checked="false"] {
161
+ --lat-translate-x: 0;
162
+ }
163
+ }
164
+ }
165
+
166
+ &[data-size="md"] {
167
+ height: 28px;
168
+ font-size: 12px;
169
+ line-height: 28px;
170
+
171
+ button {
172
+ width: 40px;
173
+ height: 22px;
174
+ line-height: 22px;
175
+
176
+ & > div {
177
+ width: 18px;
178
+ height: 18px;
179
+ }
180
+
181
+ &[aria-checked="true"] {
182
+ --lat-translate-x: 18px;
183
+ }
184
+
185
+ &[aria-checked="false"] {
186
+ --lat-translate-x: 0;
187
+ }
188
+ }
189
+ }
190
+
191
+ &[data-size="lg"] {
192
+ height: 32px;
193
+ font-size: 14px;
194
+ line-height: 32px;
195
+
196
+ button {
197
+ width: 44px;
198
+ height: 26px;
199
+ line-height: 26px;
200
+
201
+ & > div {
202
+ width: 22px;
203
+ height: 22px;
204
+ }
205
+
206
+ &[aria-checked="true"] {
207
+ --lat-translate-x: 22px;
208
+ }
209
+
210
+ &[aria-checked="false"] {
211
+ --lat-translate-x: 0;
212
+ }
213
+ }
214
+ }
215
+
216
+ button {
217
+ display: inline-flex;
218
+
219
+ align-items: center;
220
+ justify-content: flex-start;
221
+
222
+ height: 100%;
223
+
224
+ flex-shrink: 0;
225
+
226
+ border-width: 1px;
227
+ border-style: solid;
228
+ border-color: var(--lat-thumb-border-color);
229
+ border-radius: 9999px;
230
+
231
+ color: var(--lat-text-color);
232
+ background-color: var(--lat-thumb-background-color);
233
+
234
+
235
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
236
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
237
+ transition-duration: .2s;
238
+
239
+ padding: 2px 1px;
240
+ margin-right: .5rem;
241
+
242
+
243
+ & > div {
244
+ display: block;
245
+ box-sizing: border-box;
246
+
247
+ border-width: 0;
248
+ border-style: solid;
249
+ border-color: var(--lat-outline-color-strong);
250
+ border-radius: 9999px;
251
+
252
+ box-shadow: inset 0 0 0 var(--lat-thumb-border-width) var(--lat-thumb-border-color);
253
+ background-color: var(--lat-thumb-color);
254
+
255
+ transition-property: transform;
256
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
257
+ transition-duration: .2s;
258
+
259
+ transform: translate(var(--lat-translate-x), 0)
260
+ }
261
+
262
+ &[aria-checked="true"] {
263
+ --lat-thumb-color: #ffffff;
264
+ --lat-thumb-border-width: 0;
265
+ --lat-thumb-border-color: var(--lat-primary-color);
266
+ --lat-thumb-background-color: var(--lat-primary-color);
267
+ }
268
+
269
+ &[aria-checked="false"] {
270
+ --lat-thumb-color: #ffffff;
271
+ --lat-thumb-border-width: 1px;
272
+ --lat-thumb-border-color: var(--lat-outline-color-strong);
273
+ --lat-thumb-background-color: var(--lat-background-color-subtle);
274
+ }
275
+ }
276
+ }
277
+
278
+ @mixin textbox-size(
279
+ $size,
280
+ $height,
281
+ $font-size,
282
+ $line-height,
283
+ $padding-block,
284
+ $padding-inline,
285
+ ) {
286
+ &[data-size="#{$size}"] {
287
+ --lat-textbox-height: #{$height};
288
+ --lat-textbox-font-size: #{$font-size};
289
+ --lat-textbox-line-height: #{$line-height};
290
+ --lat-textbox-padding-block: #{$padding-block};
291
+ --lat-textbox-padding-inline: #{$padding-inline};
292
+
293
+ @content;
294
+ }
295
+ }
296
+
297
+
298
+ lat-textbox, lat-textarea, lat-select {
299
+ --lat-textbox-height: auto;
300
+ --lat-textbox-line-height: inherit;
301
+ --lat-textbox-font-size: var(--lat-font-size-small);
302
+ --lat-textbox-font-family: var(--lat-font-family-sans);
303
+ --lat-textbox-font-weight: var(--lat-font-weight-normal);
304
+ --lat-textbox-padding-block: 0;
305
+ --lat-textbox-padding-inline: 0;
306
+ --lat-textbox-border-style: solid;
307
+ --lat-textbox-border-color: transparent;
308
+ --lat-textbox-border-width: 1px;
309
+ --lat-textbox-border-radius: 4px;
310
+ --lat-textbox-color: initial;
311
+ --lat-textbox-background-color: initial;
312
+ --lat-textbox-placeholder-color: initial;
313
+ }
314
+
315
+ lat-textbox, lat-textarea, lat-select {
316
+ --lat-textbox-color: var(--lat-text-color);
317
+ --lat-textbox-placeholder-color: var(--lat-text-color-subtle);
318
+ --lat-textbox-border-width: 0.0625rem;
319
+ --lat-textbox-border-color: var(--lat-outline-color-strong);
320
+ --lat-textbox-background-color: #ffffff;
321
+ }
322
+
323
+ lat-textbox, lat-textarea {
324
+ position: relative;
325
+ box-sizing: border-box;
326
+
327
+ display: inline-flex;
328
+ overflow: hidden;
329
+
330
+ width: 100%;
331
+ height: var(--lat-textbox-height);
332
+ line-height: var(--lat-textbox-line-height);
333
+
334
+ font-size: var(--lat-textbox-font-size);
335
+ font-family: var(--lat-textbox-font-family), sans-serif;
336
+ font-weight: var(--lat-textbox-font-weight);
337
+
338
+ border-width: var(--lat-textbox-border-width);
339
+ border-style: var(--lat-textbox-border-style);
340
+ border-color: var(--lat-textbox-border-color);
341
+ border-radius: var(--lat-textbox-border-radius);
342
+
343
+ color: var(--lat-textbox-color);
344
+ background-color: var(--lat-textbox-background-color);
345
+
346
+ transition-property: background, border, color, fill, opacity;
347
+ transition-duration: .2s;
348
+
349
+ &:hover {
350
+ --lat-textbox-color: var(--lat-text-color);
351
+ --lat-textbox-border-color: var(--lat-outline-color-hover);
352
+ }
353
+
354
+ &:focus-within {
355
+ --lat-textbox-color: var(--lat-text-color);
356
+ --lat-textbox-border-color: var(--lat-outline-color-active);
357
+ }
358
+
359
+ &[data-dirty="true"][data-invalid="true"] {
360
+ --lat-textbox-border-color: var(--lat-danger-color);
361
+ }
362
+
363
+ &[data-readonly="true"] {
364
+ --lat-textbox-color: var(--lat-text-color);
365
+ --lat-textbox-border-color: transparent;
366
+ --lat-textbox-background-color: #ffffff;
367
+
368
+ margin-inline: calc(var(--lat-textbox-padding-inline) * -1);
369
+
370
+ input, textarea {
371
+ cursor: default;
372
+ }
373
+
374
+ &:hover {
375
+ --lat-textbox-color: var(--lat-text-color);
376
+ --lat-textbox-border-color: transparent;
377
+ --lat-textbox-background-color: var(--lat-background-color-hover);
378
+ }
379
+
380
+ &:focus-within {
381
+ --lat-textbox-color: var(--lat-text-color);
382
+ --lat-textbox-border-color: transparent;
383
+ --lat-textbox-background-color: var(--lat-background-color-active);
384
+ }
385
+ }
386
+
387
+ input, textarea {
388
+ position: relative;
389
+ overflow: hidden;
390
+ box-sizing: border-box;
391
+
392
+ display: inline-flex;
393
+
394
+ align-items: center;
395
+ justify-content: center;
396
+
397
+ text-align: left;
398
+ touch-action: manipulation;
399
+
400
+ flex-grow: 1;
401
+ flex-shrink: 0;
402
+
403
+ line-height: var(--lat-textbox-line-height);
404
+
405
+ font-size: inherit;
406
+ font-family: inherit;
407
+ font-weight: inherit;
408
+
409
+ margin: 0;
410
+ padding: 0;
411
+
412
+ border: none;
413
+ outline: none;
414
+
415
+ padding-block: var(--lat-textbox-padding-block);
416
+ padding-inline: var(--lat-textbox-padding-inline);
417
+
418
+ flex-grow: 1;
419
+
420
+ vertical-align: top;
421
+
422
+ color: inherit;
423
+ background-color: initial;
424
+
425
+ &::placeholder {
426
+ color: var(--lat-textbox-placeholder-color);
427
+
428
+ font-size: var(--lat-textbox-font-size);
429
+ font-family: var(--lat-textbox-font-family), sans-serif;
430
+ font-weight: var(--lat-textbox-font-weight);
431
+ }
432
+ }
433
+
434
+ @include textbox-size(
435
+ "sm",
436
+ 1.5rem,
437
+ 0.75rem,
438
+ 1.125rem,
439
+ 0.25rem,
440
+ 0.5rem
441
+ );
442
+
443
+ @include textbox-size(
444
+ "md",
445
+ 1.75rem,
446
+ 0.75rem,
447
+ 1.125rem,
448
+ 0.25rem,
449
+ 0.5rem
450
+ );
451
+
452
+ @include textbox-size(
453
+ "lg",
454
+ 2rem,
455
+ 0.875rem,
456
+ 1.3125rem,
457
+ 0.25rem,
458
+ 0.5rem
459
+ );
460
+ }
461
+
462
+ lat-textarea {
463
+ height: auto;
464
+ box-sizing: content-box;
465
+
466
+ textarea {
467
+ overflow: auto;
468
+ }
469
+ }
470
+
471
+ lat-select {
472
+ position: relative;
473
+ box-sizing: border-box;
474
+
475
+ display: flex;
476
+
477
+ overflow: hidden;
478
+
479
+ min-width: 0;
480
+ max-width: 100%;
481
+
482
+ lat-select-trigger {
483
+ position: relative;
484
+ box-sizing: border-box;
485
+
486
+ display: flex;
487
+ overflow: hidden;
488
+
489
+ flex-grow: 1;
490
+
491
+ height: var(--lat-textbox-height);
492
+ line-height: var(--lat-textbox-line-height);
493
+ width: 100%;
494
+ max-width: 100%;
495
+
496
+ font-size: var(--lat-textbox-font-size);
497
+ font-family: var(--lat-textbox-font-family), sans-serif;
498
+ font-weight: var(--lat-textbox-font-weight);
499
+
500
+ border-width: var(--lat-textbox-border-width);
501
+ border-style: var(--lat-textbox-border-style);
502
+ border-color: var(--lat-textbox-border-color);
503
+ border-radius: var(--lat-textbox-border-radius);
504
+
505
+ color: var(--lat-textbox-color);
506
+ background-color: var(--lat-textbox-background-color);
507
+
508
+ transition-property: background, border, color, fill, opacity;
509
+ transition-duration: .2s;
510
+
511
+ &:hover {
512
+ --lat-textbox-color: var(--lat-text-color);
513
+ --lat-textbox-border-color: var(--lat-outline-color-hover);
514
+ }
515
+
516
+ &:focus-within {
517
+ --lat-textbox-color: var(--lat-text-color);
518
+ --lat-textbox-border-color: var(--lat-outline-color-active);
519
+ }
520
+
521
+ @include textbox-size(
522
+ "sm",
523
+ 1.5rem,
524
+ 0.75rem,
525
+ 1.125rem,
526
+ 0.25rem,
527
+ 0.5rem
528
+ );
529
+
530
+ @include textbox-size(
531
+ "md",
532
+ 1.75rem,
533
+ 0.75rem,
534
+ 1.125rem,
535
+ 0.25rem,
536
+ 0.5rem
537
+ );
538
+
539
+ @include textbox-size(
540
+ "lg",
541
+ 2rem,
542
+ 0.875rem,
543
+ 1.3125rem,
544
+ 0.25rem,
545
+ 0.5rem
546
+ );
547
+
548
+ lat-select-value {
549
+ overflow: hidden;
550
+ position: relative;
551
+
552
+ display: inline-flex;
553
+
554
+ flex-grow: 1;
555
+
556
+ .lat-select-value-scrollable {
557
+ overflow: hidden;
558
+ position: relative;
559
+
560
+ flex-grow: 1;
561
+
562
+ .lat-select-value-scrollable-content {
563
+ position: absolute;
564
+
565
+ box-sizing: border-box;
566
+
567
+ width: 100%;
568
+ height: 100%;
569
+
570
+ display: flex;
571
+ align-items: center;
572
+
573
+ gap: 4px;
574
+ margin-inline: 4px;
575
+
576
+
577
+ }
578
+ }
579
+ }
580
+
581
+ //lat-select-value {
582
+ // display: inline-flex;
583
+ //
584
+ // overflow: hidden;
585
+ //
586
+ // min-width: 0;
587
+ //
588
+ // flex-grow: 1;
589
+ // flex-wrap: nowrap;
590
+ //
591
+ // gap: 4px;
592
+ // margin-inline: 4px;
593
+ //
594
+ .lat-select-tag {
595
+ display: flex;
596
+ overflow: hidden;
597
+
598
+ min-width: 0;
599
+ min-height: 0;
600
+
601
+ flex-shrink: 0;
602
+ align-items: center;
603
+ justify-content: flex-start;
604
+
605
+ cursor: pointer;
606
+ user-select: none;
607
+
608
+ font-size: var(--lat-textbox-font-size);
609
+ font-family: var(--lat-textbox-font-family), sans-serif;
610
+ font-weight: var(--lat-textbox-font-weight);
611
+
612
+
613
+ span {
614
+ display: inline-block;
615
+
616
+ padding-block: 2px;
617
+ padding-inline: 8px;
618
+
619
+ border-radius: 4px;
620
+
621
+ background-color: var(--lat-background-color-subtle-hover);
622
+ }
623
+ }
624
+
625
+ lat-select-value + .lat-select-control {
626
+ position: relative;
627
+ box-sizing: content-box;
628
+
629
+ display: flex;
630
+
631
+ flex-direction: column;
632
+
633
+ border-left-style: solid;
634
+ border-left-width: 1px;
635
+ border-left-color: var(--lat-textbox-border-color);
636
+
637
+ lat-button {
638
+ --lat-button-height: var(--lat-textbox-height);
639
+ width: var(--lat-textbox-height);
640
+ }
641
+ }
642
+
643
+
644
+ }
645
+
646
+ }
647
+
648
+ .lat-select-dropdown {
649
+
650
+ lat-listbox {
651
+ padding-block: 4px;
652
+ padding-inline: 4px;
653
+
654
+ box-shadow: var(--lat-box-shadow-large);
655
+ background-color: var(--lat-background-color);
656
+
657
+ border-radius: 4px;
658
+
659
+ &[data-side="top"] {
660
+ inset: 0 0 4px 0;
661
+ }
662
+
663
+ &[data-side="right"] {
664
+ inset: 0 0 0 4px;
665
+ }
666
+
667
+ &[data-side="bottom"] {
668
+ inset: 4px 0 0 0;
669
+ }
670
+
671
+ &[data-side="left"] {
672
+ inset: 0 4px 0 0;
673
+ }
674
+
675
+ [role="option"] {
676
+ display: inline-flex;
677
+
678
+ flex-wrap: wrap;
679
+ flex-direction: row;
680
+
681
+ gap: 10px;
682
+ padding-inline: 10px;
683
+
684
+ align-items: center;
685
+ justify-content: flex-start;
686
+
687
+ width: 100%;
688
+ height: 28px;
689
+
690
+ cursor: pointer;
691
+ user-select: none;
692
+
693
+
694
+ font-size: var(--lat-font-size-small);
695
+ font-family: var(--lat-font-family-sans), sans-serif;
696
+ font-weight: var(--lat-font-weight-normal);
697
+
698
+ color: var(--lat-text-color);
699
+ background-color: var(--lat-background-color);
700
+
701
+ transition-property: background, border, color, fill, opacity;
702
+ transition-duration: 0.2s;
703
+
704
+ &:hover {
705
+ fill: var(--lat-text-color);
706
+ color: var(--lat-text-color);
707
+ border-color: var(--lat-background-color-subtle-hover);
708
+ background-color: var(--lat-background-color-subtle-hover);
709
+ }
710
+
711
+ //&:active {
712
+ // fill: var(--lat-text-color);
713
+ // color: var(--lat-text-color);
714
+ // border-color: var(--lat-background-color-subtle-active);
715
+ // background-color: var(--lat-background-color-subtle-active);
716
+ //}
717
+ }
718
+ }
719
+ }
720
+
721
+ lat-textbox[type="number"] {
722
+ lat-spinners {
723
+ position: relative;
724
+ box-sizing: content-box;
725
+
726
+ display: flex;
727
+
728
+ flex-direction: column;
729
+
730
+ align-items: center;
731
+ justify-content: center;
732
+
733
+ width: var(--lat-textbox-height);
734
+ max-height: var(--lat-textbox-height);
735
+ line-height: var(--lat-textbox-height);
736
+
737
+ border-left-style: solid;
738
+ border-left-width: 1px;
739
+ border-left-color: var(--lat-textbox-border-color);
740
+
741
+ transition-property: background, border, color, fill, opacity;
742
+ transition-duration: .2s;
743
+
744
+ lat-button {
745
+ --lat-button-height: calc(var(--lat-textbox-height) / 2);
746
+
747
+ width: 100%;
748
+ border-radius: 0;
749
+ }
750
+ }
751
+ }
752
+
753
+ lat-checkbox {
754
+ display: inline-flex;
755
+
756
+ cursor: default;
757
+
758
+ align-items: center;
759
+ justify-content: flex-start;
760
+
761
+ font-family: var(--lat-font-family-sans), sans-serif;
762
+ font-weight: var(--lat-font-weight-normal);
763
+
764
+ &[data-size="sm"] {
765
+ height: 24px;
766
+ font-size: 12px;
767
+ line-height: 24px;
768
+
769
+ button {
770
+ width: 14px;
771
+ height: 14px;
772
+ line-height: 14px;
773
+ }
774
+ }
775
+
776
+ &[data-size="md"] {
777
+ height: 28px;
778
+ font-size: 12px;
779
+ line-height: 28px;
780
+
781
+ button {
782
+ width: 18px;
783
+ height: 18px;
784
+ line-height: 18px;
785
+ }
786
+ }
787
+
788
+ &[data-size="lg"] {
789
+ height: 32px;
790
+ font-size: 14px;
791
+ line-height: 32px;
792
+
793
+ button {
794
+ width: 22px;
795
+ height: 22px;
796
+ line-height: 22px;
797
+ }
798
+ }
799
+
800
+ button {
801
+ display: inline-flex;
802
+
803
+ align-items: center;
804
+ justify-content: center;
805
+
806
+ flex-shrink: 0;
807
+
808
+ border-width: 1px;
809
+ border-style: solid;
810
+ border-color: var(--lat-checkbox-border-color);
811
+ border-radius: 4px;
812
+
813
+ color: var(--lat-checkbox-text-color);
814
+ background-color: var(--lat-checkbox-background-color);
815
+
816
+ transition-property: background, border, color, fill, opacity;
817
+ transition-duration: .2s;
818
+
819
+ &[aria-checked="true"] {
820
+ --lat-checkbox-text-color: #ffffff;
821
+ --lat-checkbox-border-color: var(--lat-primary-color);
822
+ --lat-checkbox-background-color: var(--lat-primary-color);
823
+ }
824
+
825
+ &[aria-checked="false"] {
826
+ --lat-checkbox-text-color: #ffffff;
827
+ --lat-checkbox-border-color: var(--lat-outline-color);
828
+ --lat-checkbox-background-color: var(--lat-background-color);
829
+ }
830
+ }
831
+ }
832
+
833
+
834
+
package/styles/icons/_index.scss ADDED
@@ -0,0 +1,34 @@
1
+ lat-icon {
2
+ --lat-icon-url: initial;
3
+
4
+ position: relative;
5
+ box-sizing: border-box;
6
+
7
+ display: inline-block;
8
+
9
+ block-size: 1em;
10
+ inline-size: 1em;
11
+ vertical-align: middle;
12
+
13
+ font-size: inherit;
14
+ flex-shrink: 0;
15
+
16
+ border: 0 solid transparent;
17
+
18
+ &:after {
19
+ position: absolute;
20
+
21
+ display: block;
22
+
23
+ top: 0;
24
+ left: 0;
25
+
26
+ block-size: 100%;
27
+ inline-size: 100%;
28
+
29
+ content: "";
30
+
31
+ mask: var(--lat-icon-url) no-repeat center / contain;
32
+ background: currentColor
33
+ }
34
+ }
package/styles/list/_index.scss ADDED
File without changes
package/styles/listbox/_index.scss ADDED
@@ -0,0 +1,30 @@
1
+
2
+
3
+ lat-listbox {
4
+ position: relative;
5
+ box-sizing: border-box;
6
+
7
+ overflow: hidden;
8
+
9
+ display: flex;
10
+ flex-direction: column;
11
+
12
+ outline: none;
13
+ pointer-events: auto;
14
+
15
+ [role="listbox"] {
16
+ position: relative;
17
+ box-sizing: border-box;
18
+
19
+ overflow-y: auto;
20
+
21
+ will-change: transform;
22
+
23
+ display: flex;
24
+ flex-direction: column;
25
+
26
+ [role="option"] {
27
+
28
+ }
29
+ }
30
+ }