tyrell-components 1.0.0-TC24 → 1.0.0-TC25
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/css/tyrell.css +4 -4
- package/dist/tyrell.css +4 -4
- package/dist/tyrell.js +1 -1
- package/lib/base/ty-component.d.ts +7 -0
- package/lib/base/ty-component.d.ts.map +1 -1
- package/lib/base/ty-component.js +27 -0
- package/lib/base/ty-component.js.map +1 -1
- package/lib/components/checkbox.d.ts +2 -0
- package/lib/components/checkbox.d.ts.map +1 -1
- package/lib/components/checkbox.js +20 -0
- package/lib/components/checkbox.js.map +1 -1
- package/lib/components/input.d.ts +8 -0
- package/lib/components/input.d.ts.map +1 -1
- package/lib/components/input.js +50 -4
- package/lib/components/input.js.map +1 -1
- package/lib/components/radio.d.ts.map +1 -1
- package/lib/components/radio.js +2 -0
- package/lib/components/radio.js.map +1 -1
- package/lib/components/scroll-container.d.ts +16 -0
- package/lib/components/scroll-container.d.ts.map +1 -1
- package/lib/components/scroll-container.js +105 -1
- package/lib/components/scroll-container.js.map +1 -1
- package/lib/components/switch.d.ts +2 -0
- package/lib/components/switch.d.ts.map +1 -1
- package/lib/components/switch.js +18 -0
- package/lib/components/switch.js.map +1 -1
- package/lib/components/textarea.d.ts +3 -0
- package/lib/components/textarea.d.ts.map +1 -1
- package/lib/components/textarea.js +61 -6
- package/lib/components/textarea.js.map +1 -1
- package/lib/styles/calendar-month.d.ts +1 -1
- package/lib/styles/calendar-month.d.ts.map +1 -1
- package/lib/styles/calendar-month.js +26 -58
- package/lib/styles/calendar-month.js.map +1 -1
- package/lib/styles/calendar-navigation.d.ts +1 -1
- package/lib/styles/calendar-navigation.d.ts.map +1 -1
- package/lib/styles/calendar-navigation.js +10 -32
- package/lib/styles/calendar-navigation.js.map +1 -1
- package/lib/styles/scroll-container.d.ts +1 -1
- package/lib/styles/scroll-container.d.ts.map +1 -1
- package/lib/styles/scroll-container.js +6 -0
- package/lib/styles/scroll-container.js.map +1 -1
- package/lib/styles/textarea.d.ts +1 -1
- package/lib/styles/textarea.d.ts.map +1 -1
- package/lib/styles/textarea.js +67 -33
- package/lib/styles/textarea.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +10 -2
|
@@ -9,43 +9,11 @@ export const calendarMonthStyles = `
|
|
|
9
9
|
Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.
|
|
10
10
|
============================================================================ */
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
/* Header (weekday names) */
|
|
19
|
-
--ty-calendar-header-color: var(--ty-color-neutral-strong);
|
|
20
|
-
|
|
21
|
-
/* Day cell — base */
|
|
22
|
-
--ty-calendar-day-color: var(--ty-calendar-muted);
|
|
23
|
-
--ty-calendar-day-bg: transparent;
|
|
24
|
-
--ty-calendar-day-border: var(--ty-border);
|
|
25
|
-
--ty-calendar-day-radius: 0.375rem;
|
|
26
|
-
|
|
27
|
-
/* Day cell — hover */
|
|
28
|
-
--ty-calendar-day-hover-color: var(--ty-color-neutral-strong);
|
|
29
|
-
--ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);
|
|
30
|
-
--ty-calendar-day-hover-border: var(--ty-border-bold);
|
|
31
|
-
|
|
32
|
-
/* Today */
|
|
33
|
-
--ty-calendar-today-color: var(--ty-color-secondary-strong);
|
|
34
|
-
--ty-calendar-today-bg: var(--ty-bg-secondary-soft);
|
|
35
|
-
--ty-calendar-today-border: var(--ty-calendar-today-accent);
|
|
36
|
-
|
|
37
|
-
/* Selected */
|
|
38
|
-
--ty-calendar-selected-color: var(--ty-color-primary-strong);
|
|
39
|
-
--ty-calendar-selected-bg: var(--ty-bg-primary);
|
|
40
|
-
--ty-calendar-selected-border: var(--ty-calendar-accent);
|
|
41
|
-
--ty-calendar-selected-hover-bg: var(--ty-bg-primary-bold);
|
|
42
|
-
--ty-calendar-selected-hover-border: var(--ty-color-primary-bold);
|
|
43
|
-
|
|
44
|
-
/* Modifier states */
|
|
45
|
-
--ty-calendar-weekend-color: var(--ty-color-danger-soft);
|
|
46
|
-
--ty-calendar-other-month-color: var(--ty-color-neutral-faint);
|
|
47
|
-
--ty-calendar-other-month-opacity: 0.5;
|
|
48
|
-
}
|
|
12
|
+
/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point
|
|
13
|
+
of use (not declared on :host) so consumers can override any of them
|
|
14
|
+
from outside the shadow root. The 3 accent aliases — --ty-calendar-accent,
|
|
15
|
+
--ty-calendar-today-accent, --ty-calendar-muted — still cascade into the
|
|
16
|
+
derived defaults, so overriding one retints the related cells. */
|
|
49
17
|
|
|
50
18
|
/* ============================================================================
|
|
51
19
|
Base Calendar Container
|
|
@@ -77,7 +45,7 @@ export const calendarMonthStyles = `
|
|
|
77
45
|
|
|
78
46
|
.calendar-header-row {
|
|
79
47
|
flex: 0 0 auto;
|
|
80
|
-
color: var(--ty-calendar-header-color);
|
|
48
|
+
color: var(--ty-calendar-header-color, var(--ty-color-neutral-strong));
|
|
81
49
|
}
|
|
82
50
|
|
|
83
51
|
.calendar-day-row {
|
|
@@ -130,10 +98,10 @@ export const calendarMonthStyles = `
|
|
|
130
98
|
margin: 0.125rem;
|
|
131
99
|
|
|
132
100
|
/* Visual */
|
|
133
|
-
border-radius: var(--ty-calendar-day-radius);
|
|
134
|
-
border: 1px solid var(--ty-calendar-day-border);
|
|
135
|
-
background-color: var(--ty-calendar-day-bg);
|
|
136
|
-
color: var(--ty-calendar-day-color);
|
|
101
|
+
border-radius: var(--ty-calendar-day-radius, 0.375rem);
|
|
102
|
+
border: 1px solid var(--ty-calendar-day-border, var(--ty-border-faint));
|
|
103
|
+
background-color: var(--ty-calendar-day-bg, transparent);
|
|
104
|
+
color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-color-neutral)));
|
|
137
105
|
cursor: pointer;
|
|
138
106
|
transition: all 0.15s ease;
|
|
139
107
|
|
|
@@ -143,9 +111,9 @@ export const calendarMonthStyles = `
|
|
|
143
111
|
|
|
144
112
|
/* Hover State - Stronger Feedback */
|
|
145
113
|
.calendar-day-cell:hover {
|
|
146
|
-
color: var(--ty-calendar-day-hover-color);
|
|
147
|
-
background-color: var(--ty-calendar-day-hover-bg);
|
|
148
|
-
border-color: var(--ty-calendar-day-hover-border);
|
|
114
|
+
color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));
|
|
115
|
+
background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
|
|
116
|
+
border-color: var(--ty-calendar-day-hover-border, var(--ty-border-bold));
|
|
149
117
|
}
|
|
150
118
|
|
|
151
119
|
/* ============================================================================
|
|
@@ -154,40 +122,40 @@ export const calendarMonthStyles = `
|
|
|
154
122
|
|
|
155
123
|
/* Today - Strong Visual Indicator */
|
|
156
124
|
.calendar-day-cell.today {
|
|
157
|
-
background-color: var(--ty-calendar-today-bg);
|
|
158
|
-
color: var(--ty-calendar-today-color);
|
|
159
|
-
border-color: var(--ty-calendar-today-border);
|
|
125
|
+
background-color: var(--ty-calendar-today-bg, var(--ty-bg-secondary-soft));
|
|
126
|
+
color: var(--ty-calendar-today-color, var(--ty-color-secondary-strong));
|
|
127
|
+
border-color: var(--ty-calendar-today-border, var(--ty-calendar-today-accent, var(--ty-color-secondary)));
|
|
160
128
|
font-weight: 600;
|
|
161
129
|
}
|
|
162
130
|
|
|
163
131
|
/* Weekend - Subtle Color Shift */
|
|
164
132
|
.calendar-day-cell.weekend {
|
|
165
|
-
color: var(--ty-calendar-weekend-color);
|
|
133
|
+
color: var(--ty-calendar-weekend-color, var(--ty-color-danger-soft));
|
|
166
134
|
}
|
|
167
135
|
|
|
168
136
|
/* Other Month - Muted */
|
|
169
137
|
.calendar-day-cell.other-month {
|
|
170
|
-
color: var(--ty-calendar-other-month-color);
|
|
171
|
-
opacity: var(--ty-calendar-other-month-opacity);
|
|
138
|
+
color: var(--ty-calendar-other-month-color, var(--ty-color-neutral-faint));
|
|
139
|
+
opacity: var(--ty-calendar-other-month-opacity, 0.5);
|
|
172
140
|
}
|
|
173
141
|
|
|
174
142
|
.calendar-day-cell.other-month:hover {
|
|
175
|
-
color: var(--ty-calendar-day-hover-color);
|
|
176
|
-
background-color: var(--ty-calendar-day-hover-bg);
|
|
143
|
+
color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));
|
|
144
|
+
background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
|
|
177
145
|
opacity: 0.7;
|
|
178
146
|
}
|
|
179
147
|
|
|
180
148
|
/* Selected State (for custom usage) */
|
|
181
149
|
.calendar-day-cell.selected {
|
|
182
|
-
background-color: var(--ty-calendar-selected-bg);
|
|
183
|
-
color: var(--ty-calendar-selected-color);
|
|
184
|
-
border-color: var(--ty-calendar-selected-border);
|
|
150
|
+
background-color: var(--ty-calendar-selected-bg, var(--ty-bg-primary));
|
|
151
|
+
color: var(--ty-calendar-selected-color, var(--ty-color-primary-strong));
|
|
152
|
+
border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--ty-color-primary)));
|
|
185
153
|
font-weight: 600;
|
|
186
154
|
}
|
|
187
155
|
|
|
188
156
|
.calendar-day-cell.selected:hover {
|
|
189
|
-
background-color: var(--ty-calendar-selected-hover-bg);
|
|
190
|
-
border-color: var(--ty-calendar-selected-hover-border);
|
|
157
|
+
background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));
|
|
158
|
+
border-color: var(--ty-calendar-selected-hover-border, var(--ty-color-primary-bold));
|
|
191
159
|
}
|
|
192
160
|
|
|
193
161
|
.calendar-day-cell.selected.other-month {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG
|
|
1
|
+
{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6OlC,CAAC"}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Calendar Navigation Styles
|
|
3
3
|
* Clean, modern design with proper visual hierarchy and size variants
|
|
4
4
|
*/
|
|
5
|
-
export declare const calendarNavigationStyles = "\n/* ============================================================================\n Size Variants (CSS Custom Properties)\n ============================================================================ */\n\n
|
|
5
|
+
export declare const calendarNavigationStyles = "\n/* ============================================================================\n Size Variants (CSS Custom Properties)\n ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n use (NOT on :host) so consumers can override them from outside \u2014 this\n component is nested inside ty-calendar's shadow, so a :host default would\n block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"sm\"]) {\n --nav-btn-size: 1.5rem;\n --nav-btn-icon-size: 1rem;\n --nav-font-size: 0.875rem;\n --nav-padding: 0.375rem 0.5rem;\n --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n --nav-btn-size: 2.5rem;\n --nav-btn-icon-size: 1.5rem;\n --nav-font-size: 1.125rem;\n --nav-padding: 0.625rem 1rem;\n --nav-default-width: 360px;\n}\n\n/* ============================================================================\n Main Navigation Header\n ============================================================================ */\n\n.calendar-navigation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nav-padding);\n font-family: system-ui, sans-serif;\n user-select: none;\n width: var(--nav-width, var(--nav-default-width));\n box-sizing: border-box;\n}\n\n/* ============================================================================\n Navigation Groups (Left, Center, Right)\n ============================================================================ */\n\n.nav-group {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n flex: 0 0 auto;\n}\n\n.nav-group-center {\n flex: 1;\n justify-content: center;\n}\n\n/* ============================================================================\n Navigation Buttons\n ============================================================================ */\n\n.nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nav-btn-size);\n height: var(--nav-btn-size);\n padding: 0;\n border: none;\n border-radius: 0.375rem;\n background-color: transparent;\n color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.nav-btn:hover {\n background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n transform: scale(0.95);\n}\n\n.nav-btn:focus-visible {\n outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n width: var(--nav-btn-icon-size);\n height: var(--nav-btn-icon-size);\n display: block;\n}\n\n/* ============================================================================\n Month/Year Display (Center)\n ============================================================================ */\n\n.month-year-display {\n font-size: var(--nav-font-size);\n font-weight: 600;\n color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n text-align: center;\n white-space: nowrap;\n letter-spacing: -0.01em;\n}\n";
|
|
6
6
|
//# sourceMappingURL=calendar-navigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,
|
|
1
|
+
{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,y1GAmHpC,CAAC"}
|
|
@@ -7,32 +7,10 @@ export const calendarNavigationStyles = `
|
|
|
7
7
|
Size Variants (CSS Custom Properties)
|
|
8
8
|
============================================================================ */
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
--nav-font-size: 1rem;
|
|
15
|
-
--nav-padding: 0.5rem 0.75rem;
|
|
16
|
-
--nav-default-width: 280px;
|
|
17
|
-
|
|
18
|
-
/* ==========================================================================
|
|
19
|
-
Theming Tokens
|
|
20
|
-
Override these to retheme navigation without touching the global palette.
|
|
21
|
-
========================================================================== */
|
|
22
|
-
|
|
23
|
-
/* Accent alias — drives focus outline, mirrors --ty-calendar-accent */
|
|
24
|
-
--ty-calendar-accent: var(--ty-color-primary);
|
|
25
|
-
|
|
26
|
-
/* Nav button (prev/next chevrons) */
|
|
27
|
-
--ty-calendar-nav-color: var(--ty-color-neutral);
|
|
28
|
-
--ty-calendar-nav-hover-color: var(--ty-color-neutral-strong);
|
|
29
|
-
--ty-calendar-nav-hover-bg: var(--ty-bg-neutral-soft);
|
|
30
|
-
--ty-calendar-nav-active-bg: var(--ty-bg-neutral);
|
|
31
|
-
--ty-calendar-nav-focus-outline: var(--ty-calendar-accent);
|
|
32
|
-
|
|
33
|
-
/* Title (month/year display) */
|
|
34
|
-
--ty-calendar-nav-title-color: var(--ty-color-neutral-strong);
|
|
35
|
-
}
|
|
10
|
+
/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of
|
|
11
|
+
use (NOT on :host) so consumers can override them from outside — this
|
|
12
|
+
component is nested inside ty-calendar's shadow, so a :host default would
|
|
13
|
+
block inherited overrides. --ty-calendar-accent still cascades in. */
|
|
36
14
|
|
|
37
15
|
:host([data-size="sm"]) {
|
|
38
16
|
--nav-btn-size: 1.5rem;
|
|
@@ -99,24 +77,24 @@ export const calendarNavigationStyles = `
|
|
|
99
77
|
border: none;
|
|
100
78
|
border-radius: 0.375rem;
|
|
101
79
|
background-color: transparent;
|
|
102
|
-
color: var(--ty-calendar-nav-color);
|
|
80
|
+
color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
|
|
103
81
|
cursor: pointer;
|
|
104
82
|
transition: all 0.15s ease;
|
|
105
83
|
outline: none;
|
|
106
84
|
}
|
|
107
85
|
|
|
108
86
|
.nav-btn:hover {
|
|
109
|
-
background-color: var(--ty-calendar-nav-hover-bg);
|
|
110
|
-
color: var(--ty-calendar-nav-hover-color);
|
|
87
|
+
background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));
|
|
88
|
+
color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));
|
|
111
89
|
}
|
|
112
90
|
|
|
113
91
|
.nav-btn:active {
|
|
114
|
-
background-color: var(--ty-calendar-nav-active-bg);
|
|
92
|
+
background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));
|
|
115
93
|
transform: scale(0.95);
|
|
116
94
|
}
|
|
117
95
|
|
|
118
96
|
.nav-btn:focus-visible {
|
|
119
|
-
outline: 2px solid var(--ty-calendar-nav-focus-outline);
|
|
97
|
+
outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));
|
|
120
98
|
outline-offset: 2px;
|
|
121
99
|
}
|
|
122
100
|
|
|
@@ -134,7 +112,7 @@ export const calendarNavigationStyles = `
|
|
|
134
112
|
.month-year-display {
|
|
135
113
|
font-size: var(--nav-font-size);
|
|
136
114
|
font-weight: 600;
|
|
137
|
-
color: var(--ty-calendar-nav-title-color);
|
|
115
|
+
color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));
|
|
138
116
|
text-align: center;
|
|
139
117
|
white-space: nowrap;
|
|
140
118
|
letter-spacing: -0.01em;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG
|
|
1
|
+
{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHvC,CAAC"}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* TyScrollContainer styles
|
|
3
3
|
* Component-specific styles + shared custom scrollbar styles
|
|
4
4
|
*/
|
|
5
|
-
export declare const scrollContainerStyles = "\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n}\n\n.scroll-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators */\n/* ===================================== */\n\n.shadow-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n position: absolute;\n opacity: 0;\n transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n pointer-events: none;\n}\n\n.shadow-top {\n top: -40px;\n left: 0;\n right: 0;\n height: 80px;\n background: var(--ty-scroll-shadow-top, radial-gradient(\n ellipse 100% 30% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n bottom: -30px;\n left: 0;\n right: 0;\n height: 60px;\n background: var(--ty-scroll-shadow-bottom, radial-gradient(\n ellipse 100% 20% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n left: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-left, radial-gradient(\n ellipse 30% 100% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n right: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-right, radial-gradient(\n ellipse 30% 100% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n :host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: thin;\n scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: block;\n width: 4px;\n height: 4px;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n border-radius: 2px;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .shadow-top,\n .shadow-bottom,\n .shadow-left,\n .shadow-right {\n transition-duration: 0ms !important;\n }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n\n";
|
|
5
|
+
export declare const scrollContainerStyles = "\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n}\n\n.scroll-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n overflow-anchor: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators */\n/* ===================================== */\n\n.shadow-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n position: absolute;\n opacity: 0;\n transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n pointer-events: none;\n}\n\n.shadow-top {\n top: -40px;\n left: 0;\n right: 0;\n height: 80px;\n background: var(--ty-scroll-shadow-top, radial-gradient(\n ellipse 100% 30% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n bottom: -30px;\n left: 0;\n right: 0;\n height: 60px;\n background: var(--ty-scroll-shadow-bottom, radial-gradient(\n ellipse 100% 20% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n left: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-left, radial-gradient(\n ellipse 30% 100% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n right: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-right, radial-gradient(\n ellipse 30% 100% at center,\n color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\n transparent\n ));\n clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n :host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: thin;\n scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: block;\n width: 4px;\n height: 4px;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n border-radius: 2px;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .shadow-top,\n .shadow-bottom,\n .shadow-left,\n .shadow-right {\n transition-duration: 0ms !important;\n }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n\n";
|
|
6
6
|
//# sourceMappingURL=scroll-container.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,msRAqMjC,CAAC"}
|
|
@@ -39,6 +39,12 @@ export const scrollContainerStyles = `
|
|
|
39
39
|
display: none;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's
|
|
43
|
+
native scroll anchoring to avoid double-compensation. */
|
|
44
|
+
:host([scroll-anchoring]) .scroll-wrapper {
|
|
45
|
+
overflow-anchor: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
42
48
|
/* ===================================== */
|
|
43
49
|
/* custom-scrollbar: hides native */
|
|
44
50
|
/* ===================================== */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-container.js","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,CAAC,MAAM,qBAAqB,GAAG
|
|
1
|
+
{"version":3,"file":"scroll-container.js","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoMnC,qBAAqB;CACtB,CAAC"}
|
package/lib/styles/textarea.d.ts
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Styles for ty-textarea component
|
|
3
3
|
* Enhanced textarea with auto-resize functionality
|
|
4
4
|
*/
|
|
5
|
-
export declare const textareaStyles = "\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n /* For absolute positioned dummy element */\n}\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n}\n\n/*
|
|
5
|
+
export declare const textareaStyles = "\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 6px;\n background: var(--input-bg, var(--ty-input-bg));\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n the header/footer. */\n.textarea-scroll {\n position: relative;\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n (the component toggles .has-content via slotchange). footer defaults to\n space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n padding: 6px 10px;\n border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n padding: 6px 10px;\n border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n box-sizing: border-box;\n width: 100%;\n flex: 1 1 auto;\n border: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n /* Linear-paired typography */\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n outline: none;\n\n /* Default size (md) - refined spacing */\n min-height: 80px;\n /* Larger than input for multiline */\n padding: 12px 12px;\n /* Slightly larger padding for text areas */\n\n /* Auto-resize specific styles */\n overflow: hidden;\n /* Hide scrollbars since we're auto-resizing */\n resize: none;\n /* Disable manual resize by default */\n\n /* Ensure consistent text wrapping */\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n resize: both;\n}\n\ntextarea.resize-horizontal {\n resize: horizontal;\n}\n\ntextarea.resize-vertical {\n resize: vertical;\n}\n\ntextarea.resize-none {\n resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n /* Hidden element that measures text height */\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n visibility: hidden !important;\n white-space: pre-wrap !important;\n word-break: break-word !important;\n box-sizing: border-box !important;\n overflow: hidden !important;\n pointer-events: none !important;\n z-index: -1 !important;\n\n /* Ensure it has the same text behavior as textarea */\n word-wrap: break-word !important;\n overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n min-height: 64px;\n padding: 8px 10px;\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n min-height: 72px;\n padding: 10px 10px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n min-height: 80px;\n padding: 12px 12px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n min-height: 96px;\n padding: 14px 14px;\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n min-height: 112px;\n padding: 16px 16px;\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n outline: none;\n /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n textarea {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n\n .textarea-dummy {\n transition: none;\n }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@container (max-width: 320px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@media (max-width: 480px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n height 0.1s ease-out;\n /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out;\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n}\n";
|
|
6
6
|
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,ipTA0X1B,CAAA"}
|
package/lib/styles/textarea.js
CHANGED
|
@@ -18,19 +18,78 @@ export const textareaStyles = `
|
|
|
18
18
|
/* For absolute positioned dummy element */
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
/* Bordered container — owns the border + active state (composer layout):
|
|
22
|
+
header (top slot) · textarea (borderless) · footer (bottom slot). */
|
|
21
23
|
.textarea-wrapper {
|
|
22
24
|
position: relative;
|
|
23
25
|
width: 100%;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
border: 1px solid var(--input-border, var(--ty-input-border));
|
|
30
|
+
border-radius: 6px;
|
|
31
|
+
background: var(--input-bg, var(--ty-input-bg));
|
|
32
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing
|
|
36
|
+
to a footer button doesn't make the whole field look focused. */
|
|
37
|
+
.textarea-wrapper:has(textarea:focus) {
|
|
38
|
+
border-color: var(--input-border-focus, var(--ty-input-border-focus));
|
|
39
|
+
box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Error + disabled reflected from the inner textarea (both in shadow DOM, so
|
|
43
|
+
:has is reliable here — unlike slotted content). */
|
|
44
|
+
.textarea-wrapper:has(textarea.error) {
|
|
45
|
+
border-color: var(--ty-color-danger);
|
|
46
|
+
background: var(--ty-bg-danger-soft);
|
|
47
|
+
}
|
|
48
|
+
.textarea-wrapper:has(textarea.error):has(textarea:focus) {
|
|
49
|
+
border-color: var(--ty-color-danger-bold);
|
|
50
|
+
}
|
|
51
|
+
.textarea-wrapper:has(textarea:disabled) {
|
|
52
|
+
opacity: 0.5;
|
|
53
|
+
background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
|
|
54
|
+
border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
|
|
24
55
|
}
|
|
25
56
|
|
|
26
|
-
/*
|
|
27
|
-
|
|
57
|
+
/* Scroll region wraps just the textarea so the custom scrollbar never overlaps
|
|
58
|
+
the header/footer. */
|
|
59
|
+
.textarea-scroll {
|
|
60
|
+
position: relative;
|
|
61
|
+
flex: 1 1 auto;
|
|
62
|
+
min-height: 0;
|
|
63
|
+
display: flex;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Custom scrollbar track positioned to the scroll region (textarea edges) */
|
|
67
|
+
.textarea-scroll .ty-scrollbar-track-y {
|
|
28
68
|
top: 2px;
|
|
29
69
|
right: 2px;
|
|
30
70
|
bottom: 2px;
|
|
31
71
|
border-radius: 0 4px 4px 0;
|
|
32
72
|
}
|
|
33
73
|
|
|
74
|
+
/* Header / footer slot regions — zero footprint until they have content
|
|
75
|
+
(the component toggles .has-content via slotchange). footer defaults to
|
|
76
|
+
space-between so "tools … submit" works; a single wide button fills it. */
|
|
77
|
+
.textarea-header,
|
|
78
|
+
.textarea-footer {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
gap: 0.5rem;
|
|
82
|
+
}
|
|
83
|
+
.textarea-footer { justify-content: space-between; }
|
|
84
|
+
.textarea-header.has-content {
|
|
85
|
+
padding: 6px 10px;
|
|
86
|
+
border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));
|
|
87
|
+
}
|
|
88
|
+
.textarea-footer.has-content {
|
|
89
|
+
padding: 6px 10px;
|
|
90
|
+
border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));
|
|
91
|
+
}
|
|
92
|
+
|
|
34
93
|
/* ===== LABEL STYLING ===== */
|
|
35
94
|
|
|
36
95
|
.ty-field-label {
|
|
@@ -64,26 +123,17 @@ export const textareaStyles = `
|
|
|
64
123
|
padding-left: 12px;
|
|
65
124
|
}
|
|
66
125
|
|
|
67
|
-
/* Error state
|
|
68
|
-
textarea.error {
|
|
69
|
-
border-color: var(--ty-color-danger);
|
|
70
|
-
background: var(--ty-bg-danger-soft);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
textarea.error:focus {
|
|
74
|
-
border-color: var(--ty-color-danger-bold);
|
|
75
|
-
box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
|
|
76
|
-
}
|
|
126
|
+
/* Error state is reflected on .textarea-wrapper (see above). */
|
|
77
127
|
|
|
78
128
|
/* ===== TEXTAREA BASE STYLING ===== */
|
|
79
129
|
|
|
80
130
|
textarea {
|
|
81
|
-
/*
|
|
131
|
+
/* Borderless — the .textarea-wrapper owns the border/background now. */
|
|
82
132
|
box-sizing: border-box;
|
|
83
133
|
width: 100%;
|
|
84
|
-
|
|
85
|
-
border
|
|
86
|
-
background:
|
|
134
|
+
flex: 1 1 auto;
|
|
135
|
+
border: none;
|
|
136
|
+
background: transparent;
|
|
87
137
|
color: var(--input-color, var(--ty-input-color));
|
|
88
138
|
font-family: inherit;
|
|
89
139
|
/* Linear-paired typography */
|
|
@@ -91,7 +141,6 @@ textarea {
|
|
|
91
141
|
line-height: var(--ty-leading-sm);
|
|
92
142
|
letter-spacing: var(--ty-tracking-sm);
|
|
93
143
|
font-weight: var(--ty-font-normal);
|
|
94
|
-
transition: all 0.15s ease-in-out;
|
|
95
144
|
outline: none;
|
|
96
145
|
|
|
97
146
|
/* Default size (md) - refined spacing */
|
|
@@ -117,24 +166,9 @@ textarea {
|
|
|
117
166
|
display: none;
|
|
118
167
|
}
|
|
119
168
|
|
|
120
|
-
/*
|
|
121
|
-
textarea:focus {
|
|
122
|
-
border-color: var(--input-border-focus, var(--ty-input-border-focus));
|
|
123
|
-
box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
|
|
124
|
-
background: var(--input-bg, var(--ty-input-bg));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/* Hover state - subtle feedback */
|
|
128
|
-
textarea:hover:not(:disabled) {
|
|
129
|
-
border-color: var(--input-border-hover, var(--ty-input-border-hover));
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/* Disabled state - refined opacity */
|
|
169
|
+
/* Disabled — visual state lives on the wrapper; just the cursor/text here. */
|
|
133
170
|
textarea:disabled {
|
|
134
171
|
cursor: not-allowed;
|
|
135
|
-
opacity: 0.5;
|
|
136
|
-
background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
|
|
137
|
-
border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
|
|
138
172
|
color: var(--input-disabled-color, var(--ty-input-disabled-color));
|
|
139
173
|
}
|
|
140
174
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0X7B,CAAA"}
|
package/lib/version.d.ts
CHANGED
package/lib/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tyrell-components",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-TC25",
|
|
4
4
|
"description": "Tyrell Components - Framework-agnostic web components with semantic design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -140,11 +140,19 @@
|
|
|
140
140
|
"build:dev:watch": "vite build --config vite.config.dev.ts --watch",
|
|
141
141
|
"build": "npm run build:lib && npm run build:cdn",
|
|
142
142
|
"prepublishOnly": "npm run build",
|
|
143
|
-
"preview": "vite preview"
|
|
143
|
+
"preview": "vite preview",
|
|
144
|
+
"test": "npm run build:lib && wtr",
|
|
145
|
+
"test:watch": "wtr --watch"
|
|
144
146
|
},
|
|
145
147
|
"devDependencies": {
|
|
148
|
+
"@open-wc/testing": "^4.0.0",
|
|
146
149
|
"@rollup/plugin-terser": "^0.4.4",
|
|
150
|
+
"@types/mocha": "^10.0.10",
|
|
151
|
+
"@web/dev-server-esbuild": "^1.0.5",
|
|
152
|
+
"@web/test-runner": "^0.20.2",
|
|
153
|
+
"@web/test-runner-chrome": "^0.18.1",
|
|
147
154
|
"autoprefixer": "^10.4.27",
|
|
155
|
+
"axe-core": "^4.12.1",
|
|
148
156
|
"typescript": "^5.7.0",
|
|
149
157
|
"vite": "^5.4.11",
|
|
150
158
|
"vite-plugin-dts": "^4.5.4"
|