tyrell-components 1.0.0-TC41 → 1.0.0-TC42
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-theme.css +116 -76
- package/css/tyrell.css +57 -4
- package/dist/tyrell-theme.css +116 -76
- package/dist/tyrell.css +57 -4
- package/dist/tyrell.js +1 -1
- package/lib/styles/button.d.ts +35 -5
- package/lib/styles/button.d.ts.map +1 -1
- package/lib/styles/button.js +170 -38
- package/lib/styles/button.js.map +1 -1
- package/lib/styles/select-base.d.ts.map +1 -1
- package/lib/styles/select-base.js +18 -4
- package/lib/styles/select-base.js.map +1 -1
- package/lib/styles/select.d.ts +1 -1
- package/lib/styles/select.d.ts.map +1 -1
- package/lib/styles/select.js +1 -0
- package/lib/styles/select.js.map +1 -1
- package/lib/styles/tag.d.ts.map +1 -1
- package/lib/styles/tag.js +4 -1
- package/lib/styles/tag.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
package/lib/styles/button.d.ts
CHANGED
|
@@ -1,17 +1,47 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Button Component Styles
|
|
3
3
|
*
|
|
4
|
-
* Three appearance variants ×
|
|
4
|
+
* Three appearance variants × five semantic flavors × three tones (+/base/-).
|
|
5
5
|
* Each variant uses ONE token system:
|
|
6
|
+
*
|
|
6
7
|
* - solid → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
|
|
7
8
|
* -strong,-soft,-fg}. Derived in tyrell-theme.css via OKLCH on
|
|
8
9
|
* 3 axes (color / hover-active / theme chroma-hue); literal in
|
|
9
|
-
* tyrell.css. The component does no color math.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* tyrell.css. The component does no color math for the fill.
|
|
11
|
+
* Depth chrome (border + drop shadow) IS computed here, from
|
|
12
|
+
* the fill, via relative color — see "Depth chrome" below.
|
|
13
|
+
* - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
|
|
14
|
+
* rest); hover/active/focus always resolve to -strong,
|
|
15
|
+
* whatever the resting tone was — see "Hover escalation".
|
|
16
|
+
* - ghost → same as outlined, text only (no border), --ty-bg-{flavor}-soft
|
|
17
|
+
* background on hover.
|
|
18
|
+
*
|
|
19
|
+
* Neutral is the exception in both outlined and ghost: its `+` tone reads
|
|
20
|
+
* --ty-solid-neutral-strong (the ink dial solid buttons use — the only
|
|
21
|
+
* value that actually inverts light↔dark for full contrast) instead of the
|
|
22
|
+
* generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
|
|
23
|
+
* stay on the generic token like every other flavor.
|
|
24
|
+
*
|
|
25
|
+
* Depth chrome (solid only): a 1px border + soft drop shadow, both derived
|
|
26
|
+
* from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
|
|
27
|
+
* border reads the TONE'S RESTING fill (not the current/hover one) so it
|
|
28
|
+
* stays stationary while the fill rises toward it on interaction. Offset
|
|
29
|
+
* direction/magnitude is --ty-button-border-l (mode-flipped: no border at
|
|
30
|
+
* all for colored solids in dark, a lit edge in light) with its own
|
|
31
|
+
* stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
|
|
32
|
+
* to separate it from the canvas). Escape hatches --ty-solid-border-color
|
|
33
|
+
* / --ty-solid-border-width outrank the derivation entirely.
|
|
34
|
+
*
|
|
35
|
+
* Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
|
|
36
|
+
* resolve to the -strong tier regardless of starting tone — soft and base
|
|
37
|
+
* both rise to the same peak on interaction. Composes with `muted` rather
|
|
38
|
+
* than fighting it (see the escalation rules themselves for the exact
|
|
39
|
+
* split) — a pressed muted button lands on the same color as a pressed
|
|
40
|
+
* plain one of the same flavor.
|
|
12
41
|
*
|
|
13
42
|
* Per-instance overrides via host CSS variables:
|
|
14
|
-
* --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border
|
|
43
|
+
* --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
|
|
44
|
+
* --ty-solid-border-color, --ty-solid-border-width
|
|
15
45
|
*/
|
|
16
46
|
/** Rules for one custom (non-built-in) flavor across all three appearances. */
|
|
17
47
|
export declare const buttonCustomFlavorCss: (base: string) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AA6IH,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAC6C,CAAA;AAE/F,eAAO,MAAM,YAAY,QA0WsB,CAAC"}
|
package/lib/styles/button.js
CHANGED
|
@@ -1,17 +1,47 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Button Component Styles
|
|
3
3
|
*
|
|
4
|
-
* Three appearance variants ×
|
|
4
|
+
* Three appearance variants × five semantic flavors × three tones (+/base/-).
|
|
5
5
|
* Each variant uses ONE token system:
|
|
6
|
+
*
|
|
6
7
|
* - solid → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
|
|
7
8
|
* -strong,-soft,-fg}. Derived in tyrell-theme.css via OKLCH on
|
|
8
9
|
* 3 axes (color / hover-active / theme chroma-hue); literal in
|
|
9
|
-
* tyrell.css. The component does no color math.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* tyrell.css. The component does no color math for the fill.
|
|
11
|
+
* Depth chrome (border + drop shadow) IS computed here, from
|
|
12
|
+
* the fill, via relative color — see "Depth chrome" below.
|
|
13
|
+
* - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
|
|
14
|
+
* rest); hover/active/focus always resolve to -strong,
|
|
15
|
+
* whatever the resting tone was — see "Hover escalation".
|
|
16
|
+
* - ghost → same as outlined, text only (no border), --ty-bg-{flavor}-soft
|
|
17
|
+
* background on hover.
|
|
18
|
+
*
|
|
19
|
+
* Neutral is the exception in both outlined and ghost: its `+` tone reads
|
|
20
|
+
* --ty-solid-neutral-strong (the ink dial solid buttons use — the only
|
|
21
|
+
* value that actually inverts light↔dark for full contrast) instead of the
|
|
22
|
+
* generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
|
|
23
|
+
* stay on the generic token like every other flavor.
|
|
24
|
+
*
|
|
25
|
+
* Depth chrome (solid only): a 1px border + soft drop shadow, both derived
|
|
26
|
+
* from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
|
|
27
|
+
* border reads the TONE'S RESTING fill (not the current/hover one) so it
|
|
28
|
+
* stays stationary while the fill rises toward it on interaction. Offset
|
|
29
|
+
* direction/magnitude is --ty-button-border-l (mode-flipped: no border at
|
|
30
|
+
* all for colored solids in dark, a lit edge in light) with its own
|
|
31
|
+
* stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
|
|
32
|
+
* to separate it from the canvas). Escape hatches --ty-solid-border-color
|
|
33
|
+
* / --ty-solid-border-width outrank the derivation entirely.
|
|
34
|
+
*
|
|
35
|
+
* Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
|
|
36
|
+
* resolve to the -strong tier regardless of starting tone — soft and base
|
|
37
|
+
* both rise to the same peak on interaction. Composes with `muted` rather
|
|
38
|
+
* than fighting it (see the escalation rules themselves for the exact
|
|
39
|
+
* split) — a pressed muted button lands on the same color as a pressed
|
|
40
|
+
* plain one of the same flavor.
|
|
12
41
|
*
|
|
13
42
|
* Per-instance overrides via host CSS variables:
|
|
14
|
-
* --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border
|
|
43
|
+
* --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
|
|
44
|
+
* --ty-solid-border-color, --ty-solid-border-width
|
|
15
45
|
*/
|
|
16
46
|
import { FLAVORS } from '../types/common.js';
|
|
17
47
|
/* One block per flavor, per appearance. Selectors and tokens are formulaic —
|
|
@@ -33,49 +63,111 @@ const tokenRef = (prefix, f, suffix, fb) => fb
|
|
|
33
63
|
0.08 L nudges keep AA for any rest-passing fill, and re-deriving would
|
|
34
64
|
flicker black↔white whenever a nudge crosses the fg threshold. */
|
|
35
65
|
const nudged = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + var(--ty-${offsetDial})) c h)`;
|
|
66
|
+
/* Fill-relative nudge: moves TOWARD mid-lightness by the dial's magnitude,
|
|
67
|
+
whatever the fill. Needed for neutral+ — full-contrast ink sits at an L
|
|
68
|
+
extreme in both modes (near-black light / near-white dark), where the
|
|
69
|
+
MODE-directional dials clip into the L ceiling/floor and vanish. */
|
|
70
|
+
const nudgedMid = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + sign(0.5 - l) * abs(var(--ty-${offsetDial}))) c h)`;
|
|
71
|
+
/* Solid rules assign --_solid-bg (the CURRENT fill — swapped by hover/
|
|
72
|
+
active) and --_solid-rest (the tone's RESTING fill — set only by rest/
|
|
73
|
+
tone rules, never by state rules). The base button.solid rule holds the
|
|
74
|
+
single set of formulas that consume them: background follows --_solid-bg;
|
|
75
|
+
the depth border derives from --_solid-rest so it stays STATIONARY while
|
|
76
|
+
the fill steps up on hover — the fill rises toward the lit edge instead
|
|
77
|
+
of dragging the edge along with it. */
|
|
36
78
|
const solidFlavor = (f, fb) => {
|
|
37
79
|
const solid = (suffix) => tokenRef('--ty-solid', f, suffix, fb);
|
|
80
|
+
// Neutral reads its own, stronger border offset (no hue separates ink
|
|
81
|
+
// from the canvas — see --ty-button-border-l-neutral in tyrell.css).
|
|
82
|
+
// Colored flavors must RESET to the plain dial: the bare button.solid
|
|
83
|
+
// rule (which matches every solid button) sets the neutral chain.
|
|
84
|
+
const borderL = f === 'neutral'
|
|
85
|
+
? ' --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));'
|
|
86
|
+
: ' --_border-l: var(--ty-button-border-l, -0.15);';
|
|
87
|
+
// Neutral+ is full-contrast ink at an L extreme — its hover/active must
|
|
88
|
+
// move toward mid (fill-relative), not in the mode's direction.
|
|
89
|
+
const plusNudge = f === 'neutral' ? nudgedMid : nudged;
|
|
38
90
|
return `
|
|
39
|
-
button.solid.${f} { --_ring: ${tokenRef('--ty-color', f, '', fb)};
|
|
40
|
-
button.solid.${f}.tone-plus {
|
|
41
|
-
button.solid.${f}.tone-minus {
|
|
42
|
-
button.solid.${f}:hover:not(:disabled) {
|
|
43
|
-
button.solid.${f}:active:not(:disabled) {
|
|
44
|
-
button.solid.${f}.tone-plus:hover:not(:disabled) {
|
|
45
|
-
button.solid.${f}.tone-plus:active:not(:disabled) {
|
|
46
|
-
button.solid.${f}.tone-minus:hover:not(:disabled) {
|
|
47
|
-
button.solid.${f}.tone-minus:active:not(:disabled) {
|
|
91
|
+
button.solid.${f} { --_ring: ${tokenRef('--ty-color', f, '', fb)}; --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')}));${borderL} color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-fg')})); }
|
|
92
|
+
button.solid.${f}.tone-plus { --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-strong')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-strong')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-strong-fg')})); }
|
|
93
|
+
button.solid.${f}.tone-minus { --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-soft')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-soft')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-soft-fg')})); }
|
|
94
|
+
button.solid.${f}:hover:not(:disabled) { --_solid-bg: var(--ty-button-bg-hover, ${solid('-hover')}); }
|
|
95
|
+
button.solid.${f}:active:not(:disabled) { --_solid-bg: ${solid('-active')}; }
|
|
96
|
+
button.solid.${f}.tone-plus:hover:not(:disabled) { --_solid-bg: var(--ty-button-bg-hover, ${plusNudge(solid('-strong'), 'solid-hover-l')}); }
|
|
97
|
+
button.solid.${f}.tone-plus:active:not(:disabled) { --_solid-bg: ${plusNudge(solid('-strong'), 'solid-active-l')}; }
|
|
98
|
+
button.solid.${f}.tone-minus:hover:not(:disabled) { --_solid-bg: var(--ty-button-bg-hover, ${nudged(solid('-soft'), 'solid-hover-l')}); }
|
|
99
|
+
button.solid.${f}.tone-minus:active:not(:disabled) { --_solid-bg: ${nudged(solid('-soft'), 'solid-active-l')}; }
|
|
48
100
|
`;
|
|
49
101
|
};
|
|
50
102
|
const outlinedFlavor = (f, fb) => {
|
|
51
103
|
const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
|
|
104
|
+
// Neutral+ only: bare text/border need page contrast, which the
|
|
105
|
+
// per-flavor ladder is FOR (it deliberately inverts per mode) — pointing
|
|
106
|
+
// base/soft at the solid ink ramp was a real bug (dark-mode contrast
|
|
107
|
+
// against the canvas measured 1.01/1.20 — invisible; WCAG minimum is
|
|
108
|
+
// 4.5). Strong stays on ink: at 0.93 dark / 0.15 light it's still 16.5:1,
|
|
109
|
+
// and matches solid's "+" for the loud-CTA identity that was the ask.
|
|
110
|
+
const textInk = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
|
|
52
111
|
return `
|
|
53
112
|
button.outlined.${f} {
|
|
54
|
-
color: var(--ty-button-color, var(--_muted-outlined-line, ${
|
|
55
|
-
border-color: var(--ty-button-border, var(--_muted-outlined-line, ${
|
|
113
|
+
color: var(--ty-button-color, var(--_muted-outlined-line, ${textInk('')}));
|
|
114
|
+
border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('')}));
|
|
56
115
|
}
|
|
57
116
|
button.outlined.${f}.tone-plus {
|
|
58
|
-
color: var(--ty-button-color, var(--_muted-outlined-line, ${
|
|
59
|
-
border-color: var(--ty-button-border, var(--_muted-outlined-line, ${
|
|
117
|
+
color: var(--ty-button-color, var(--_muted-outlined-line, ${textInk('-strong')}));
|
|
118
|
+
border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('-strong')}));
|
|
60
119
|
}
|
|
61
120
|
button.outlined.${f}.tone-minus {
|
|
62
|
-
color: var(--ty-button-color, var(--_muted-outlined-line, ${
|
|
63
|
-
border-color: var(--ty-button-border, var(--_muted-outlined-line, ${
|
|
121
|
+
color: var(--ty-button-color, var(--_muted-outlined-line, ${textInk('-soft')}));
|
|
122
|
+
border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('-soft')}));
|
|
64
123
|
}
|
|
65
124
|
button.outlined.${f}:hover:not(:disabled) {
|
|
66
125
|
background: var(--ty-button-bg-hover, ${tokenRef('--ty-bg', f, '-soft', fb)});
|
|
67
126
|
}
|
|
127
|
+
/* Rest is whatever tone you picked; hover/active/focus always escalates to
|
|
128
|
+
the SAME peak — most-emphasized ("+") color, regardless of starting
|
|
129
|
+
tone. tone-plus is already there at rest, so this is a no-op for it.
|
|
130
|
+
:hover only, :not(.muted) — muted's hover-reveal is a DIFFERENT contract
|
|
131
|
+
(reveal the plain button's RESTING color, tested directly against it);
|
|
132
|
+
this rule would outrank that fallback and show strong instead.
|
|
133
|
+
:active/:focus-visible apply to muted too (no exclusion) — muted's own
|
|
134
|
+
reveal-on-press mechanism has much lower specificity than this rule, so
|
|
135
|
+
it simply wins outright, landing muted and plain on the same escalated
|
|
136
|
+
color when both are pressed — which is what muted's OWN test expects. */
|
|
137
|
+
button.outlined.${f}:not(.muted):hover:not(:disabled),
|
|
138
|
+
button.outlined.${f}:active:not(:disabled),
|
|
139
|
+
button.outlined.${f}:focus-visible {
|
|
140
|
+
color: var(--ty-button-color, ${textInk('-strong')});
|
|
141
|
+
border-color: var(--ty-button-border, ${textInk('-strong')});
|
|
142
|
+
}
|
|
68
143
|
`;
|
|
69
144
|
};
|
|
70
145
|
const ghostFlavor = (f, fb) => {
|
|
71
146
|
const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
|
|
147
|
+
// Neutral+ only: bare text needs page contrast, which is what the
|
|
148
|
+
// per-flavor text ladder is FOR (it deliberately inverts per mode) — the
|
|
149
|
+
// solid ink ramp doesn't need to invert for readability, a fill reads as
|
|
150
|
+
// a shape regardless of its own lightness. Pointing base/soft neutral
|
|
151
|
+
// text at ink was a real bug: dark-mode contrast against the canvas
|
|
152
|
+
// measured 1.01/1.20 (WCAG minimum is 4.5), i.e. invisible. Strong stays
|
|
153
|
+
// on ink — at 0.93 dark / 0.15 light it's still far above threshold
|
|
154
|
+
// (16.5:1), and matches solid's "+" for the loud-CTA identity that was
|
|
155
|
+
// the actual ask.
|
|
156
|
+
const ink = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
|
|
72
157
|
return `
|
|
73
|
-
button.ghost.${f} { color: var(--ty-button-color, var(--_muted-ghost-fg, ${
|
|
74
|
-
button.ghost.${f}.tone-plus { color: var(--ty-button-color, var(--_muted-ghost-fg, ${
|
|
75
|
-
button.ghost.${f}.tone-minus { color: var(--ty-button-color, var(--_muted-ghost-fg, ${
|
|
158
|
+
button.ghost.${f} { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('')})); }
|
|
159
|
+
button.ghost.${f}.tone-plus { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('-strong')})); }
|
|
160
|
+
button.ghost.${f}.tone-minus { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('-soft')})); }
|
|
76
161
|
button.ghost.${f}:hover:not(:disabled) {
|
|
77
162
|
background: var(--ty-button-bg-hover, ${tokenRef('--ty-bg', f, '-soft', fb)});
|
|
78
163
|
}
|
|
164
|
+
/* See outlinedFlavor above — same escalation-to-peak, same :hover-only
|
|
165
|
+
:not(.muted) split, text only. */
|
|
166
|
+
button.ghost.${f}:not(.muted):hover:not(:disabled),
|
|
167
|
+
button.ghost.${f}:active:not(:disabled),
|
|
168
|
+
button.ghost.${f}:focus-visible {
|
|
169
|
+
color: var(--ty-button-color, ${ink('-strong')});
|
|
170
|
+
}
|
|
79
171
|
`;
|
|
80
172
|
};
|
|
81
173
|
/** Rules for one custom (non-built-in) flavor across all three appearances. */
|
|
@@ -100,7 +192,10 @@ button {
|
|
|
100
192
|
font-size: var(--ty-font-xs);
|
|
101
193
|
line-height: var(--ty-leading-xs);
|
|
102
194
|
letter-spacing: var(--ty-tracking-xs);
|
|
103
|
-
|
|
195
|
+
/* Mode-flipped weight dial (tyrell.css): medium in light, normal in dark —
|
|
196
|
+
light-on-dark text blooms, a fixed semibold read heavy there. Override
|
|
197
|
+
with --ty-weight-action at any scope. */
|
|
198
|
+
font-weight: var(--ty-weight-action, var(--ty-font-medium));
|
|
104
199
|
white-space: nowrap;
|
|
105
200
|
cursor: pointer;
|
|
106
201
|
user-select: none;
|
|
@@ -275,6 +370,13 @@ button.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }
|
|
|
275
370
|
Hover reveal is gated to real pointers (touch has no hover); :active /
|
|
276
371
|
:focus-visible cover the tap case so touch still gets the color on press. */
|
|
277
372
|
|
|
373
|
+
/* --_muted-solid-* reads the SOLID neutral ink tokens — a fill's L doesn't
|
|
374
|
+
need page contrast. --_muted-outlined-line / --_muted-ghost-fg are bare
|
|
375
|
+
text/border and DO — they stay on the regular text ladder (it already
|
|
376
|
+
inverts correctly per mode), except tone-plus, which is legible AND
|
|
377
|
+
loud on the ink dial (16.5:1 dark, matches solid's "+" identity). Base/
|
|
378
|
+
soft on ink measured 1.01/1.20 dark contrast against the canvas —
|
|
379
|
+
invisible; WCAG minimum is 4.5. */
|
|
278
380
|
button.muted {
|
|
279
381
|
--_muted-solid-bg: var(--ty-solid-neutral);
|
|
280
382
|
--_muted-solid-fg: var(--ty-solid-neutral-fg);
|
|
@@ -283,11 +385,16 @@ button.muted {
|
|
|
283
385
|
}
|
|
284
386
|
button.muted.tone-plus {
|
|
285
387
|
--_muted-solid-bg: var(--ty-solid-neutral-strong);
|
|
286
|
-
|
|
287
|
-
|
|
388
|
+
/* fg must track the tone's fill: neutral+ is inverted ink in dark mode
|
|
389
|
+
(white fill), so inheriting base neutral's white fg would be
|
|
390
|
+
white-on-white. */
|
|
391
|
+
--_muted-solid-fg: var(--ty-solid-neutral-strong-fg);
|
|
392
|
+
--_muted-outlined-line: var(--ty-solid-neutral-strong);
|
|
393
|
+
--_muted-ghost-fg: var(--ty-solid-neutral-strong);
|
|
288
394
|
}
|
|
289
395
|
button.muted.tone-minus {
|
|
290
396
|
--_muted-solid-bg: var(--ty-solid-neutral-soft);
|
|
397
|
+
--_muted-solid-fg: var(--ty-solid-neutral-soft-fg);
|
|
291
398
|
--_muted-outlined-line: var(--ty-color-neutral-soft);
|
|
292
399
|
--_muted-ghost-fg: var(--ty-color-neutral-soft);
|
|
293
400
|
}
|
|
@@ -343,26 +450,51 @@ button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem;
|
|
|
343
450
|
============================================================ */
|
|
344
451
|
|
|
345
452
|
button.solid {
|
|
346
|
-
border: none;
|
|
347
453
|
--_ring: var(--ty-color-neutral);
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
454
|
+
--_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral));
|
|
455
|
+
--_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral));
|
|
456
|
+
/* Bare .solid is the flavorless default = neutral ink, so it takes the
|
|
457
|
+
neutral border offset; colored flavor rules reset this to the plain
|
|
458
|
+
dial. */
|
|
459
|
+
--_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));
|
|
460
|
+
background: var(--_solid-bg);
|
|
461
|
+
color: var(--ty-button-color, var(--ty-solid-neutral-fg));
|
|
462
|
+
/* Depth chrome — border + drop shadow, both scaled by --ty-button-depth.
|
|
463
|
+
(A top-edge sheen — inset 0 1px 0 <lightened fill> — used to live here
|
|
464
|
+
too; dropped, it read as a dizzying bright line rather than a subtle
|
|
465
|
+
highlight.) depth 0 = border matches fill exactly and the shadow goes
|
|
466
|
+
transparent — pixel-flat, but the 1px border stays in the layout so
|
|
467
|
+
toggling depth never shifts geometry (and solid now shares the same
|
|
468
|
+
box as outlined/ghost, which always had a 1px border).
|
|
469
|
+
--ty-button-border-l flips sign with the mode (tyrell.css): dark mode
|
|
470
|
+
runs a LIGHTER-than-fill hairline (fills read washed-out against dark
|
|
471
|
+
surfaces without a lit edge), light mode a slightly darker one.
|
|
472
|
+
Direct escape hatches outrank the derivation: --ty-solid-border-color
|
|
473
|
+
pins the border to ANY color (the L-offset dials stop mattering), and
|
|
474
|
+
--ty-solid-border-width changes thickness (widths ≠ 1px do shift
|
|
475
|
+
geometry — that's inherent).
|
|
476
|
+
Browsers without relative color drop these declarations: border falls
|
|
477
|
+
back to the base button's 1px transparent, shadows to none. */
|
|
478
|
+
border: var(--ty-solid-border-width, 1px) solid
|
|
479
|
+
var(--ty-solid-border-color,
|
|
480
|
+
oklch(from var(--_solid-rest, var(--_solid-bg)) calc(l + var(--_border-l, -0.15) * var(--ty-button-depth, 0.35)) c h));
|
|
481
|
+
box-shadow: 0 1px 2px oklch(0 0 0 / calc(0.4 * var(--ty-button-depth, 0.35)));
|
|
482
|
+
}
|
|
483
|
+
button.solid.tone-plus { --_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral-strong)); --_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral-strong)); color: var(--ty-button-color, var(--ty-solid-neutral-strong-fg)); }
|
|
484
|
+
button.solid.tone-minus { --_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral-soft)); --_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral-soft)); color: var(--ty-button-color, var(--ty-solid-neutral-soft-fg)); }
|
|
485
|
+
button.solid:hover:not(:disabled) { --_solid-bg: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
|
|
486
|
+
button.solid:active:not(:disabled) { --_solid-bg: var(--ty-solid-neutral-active); }
|
|
355
487
|
button.solid.tone-plus:hover:not(:disabled) {
|
|
356
|
-
|
|
488
|
+
--_solid-bg: var(--ty-button-bg-hover, oklch(from var(--ty-solid-neutral-strong) calc(l + sign(0.5 - l) * abs(var(--ty-solid-hover-l))) c h));
|
|
357
489
|
}
|
|
358
490
|
button.solid.tone-plus:active:not(:disabled) {
|
|
359
|
-
|
|
491
|
+
--_solid-bg: oklch(from var(--ty-solid-neutral-strong) calc(l + sign(0.5 - l) * abs(var(--ty-solid-active-l))) c h);
|
|
360
492
|
}
|
|
361
493
|
button.solid.tone-minus:hover:not(:disabled) {
|
|
362
|
-
|
|
494
|
+
--_solid-bg: var(--ty-button-bg-hover, oklch(from var(--ty-solid-neutral-soft) calc(l + var(--ty-solid-hover-l)) c h));
|
|
363
495
|
}
|
|
364
496
|
button.solid.tone-minus:active:not(:disabled) {
|
|
365
|
-
|
|
497
|
+
--_solid-bg: oklch(from var(--ty-solid-neutral-soft) calc(l + var(--ty-solid-active-l)) c h);
|
|
366
498
|
}
|
|
367
499
|
|
|
368
500
|
${FLAVORS.map((f) => solidFlavor(f)).join('')}
|
package/lib/styles/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C;;;;;;;uBAOuB;AAEvB,MAAM,QAAQ,GAAG,CAAC,MAAc,EAAE,CAAS,EAAE,MAAc,EAAE,EAAW,EAAE,EAAE,CAC1E,EAAE;IACA,CAAC,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,MAAM,SAAS,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI;IAC/D,CAAC,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,CAAA;AAEpC;;;;;;oEAMoE;AACpE,MAAM,MAAM,GAAG,CAAC,QAAgB,EAAE,UAAkB,EAAE,EAAE,CACtD,cAAc,QAAQ,sBAAsB,UAAU,SAAS,CAAA;AAEjE;;;sEAGsE;AACtE,MAAM,SAAS,GAAG,CAAC,QAAgB,EAAE,UAAkB,EAAE,EAAE,CACzD,cAAc,QAAQ,0CAA0C,UAAU,UAAU,CAAA;AAEtF;;;;;;yCAMyC;AACzC,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC7C,MAAM,KAAK,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;IACvE,sEAAsE;IACtE,qEAAqE;IACrE,sEAAsE;IACtE,kEAAkE;IAClE,MAAM,OAAO,GACX,CAAC,KAAK,SAAS;QACb,CAAC,CAAC,oFAAoF;QACtF,CAAC,CAAC,iDAAiD,CAAA;IACvD,wEAAwE;IACxE,gEAAgE;IAChE,MAAM,SAAS,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAA;IACtD,OAAO;eACM,CAAC,eAAe,QAAQ,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,6DAA6D,KAAK,CAAC,EAAE,CAAC,iEAAiE,KAAK,CAAC,EAAE,CAAC,MAAM,OAAO,yDAAyD,KAAK,CAAC,KAAK,CAAC;eACnR,CAAC,yEAAyE,KAAK,CAAC,SAAS,CAAC,iEAAiE,KAAK,CAAC,SAAS,CAAC,4DAA4D,KAAK,CAAC,YAAY,CAAC;eAC1P,CAAC,yEAAyE,KAAK,CAAC,OAAO,CAAC,iEAAiE,KAAK,CAAC,OAAO,CAAC,4DAA4D,KAAK,CAAC,UAAU,CAAC;eACpP,CAAC,mEAAmE,KAAK,CAAC,QAAQ,CAAC;eACnF,CAAC,yCAAyC,KAAK,CAAC,SAAS,CAAC;eAC1D,CAAC,8EAA8E,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,eAAe,CAAC;eAC3H,CAAC,oDAAoD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC;eAClG,CAAC,8EAA8E,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC;eACtH,CAAC,oDAAoD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC3G,CAAA;AACD,CAAC,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAChD,MAAM,KAAK,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;IACvE,gEAAgE;IAChE,yEAAyE;IACzE,qEAAqE;IACrE,qEAAqE;IACrE,0EAA0E;IAC1E,sEAAsE;IACtE,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,yBAAyB,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAClI,OAAO;kBACS,CAAC;sEACmD,OAAO,CAAC,EAAE,CAAC;sEACX,OAAO,CAAC,EAAE,CAAC;;kBAE/D,CAAC;sEACmD,OAAO,CAAC,SAAS,CAAC;sEAClB,OAAO,CAAC,SAAS,CAAC;;kBAEtE,CAAC;sEACmD,OAAO,CAAC,OAAO,CAAC;sEAChB,OAAO,CAAC,OAAO,CAAC;;kBAEpE,CAAC;0CACuB,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC;;;;;;;;;;;;kBAY3D,CAAC;kBACD,CAAC;kBACD,CAAC;yCACsB,OAAO,CAAC,SAAS,CAAC;0CACjB,OAAO,CAAC,SAAS,CAAC;;CAE3D,CAAA;AACD,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC7C,MAAM,KAAK,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;IACvE,kEAAkE;IAClE,yEAAyE;IACzE,yEAAyE;IACzE,sEAAsE;IACtE,oEAAoE;IACpE,yEAAyE;IACzE,oEAAoE;IACpE,uEAAuE;IACvE,kBAAkB;IAClB,MAAM,GAAG,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,yBAAyB,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAC9H,OAAO;eACM,CAAC,sEAAsE,GAAG,CAAC,EAAE,CAAC;eAC9E,CAAC,sEAAsE,GAAG,CAAC,SAAS,CAAC;eACrF,CAAC,sEAAsE,GAAG,CAAC,OAAO,CAAC;eACnF,CAAC;0CAC0B,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC;;;;eAI9D,CAAC;eACD,CAAC;eACD,CAAC;kCACkB,GAAG,CAAC,SAAS,CAAC;;CAE/C,CAAA;AACD,CAAC,CAAA;AAED,+EAA+E;AAC/E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE,CACpD,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;AAE/F,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqU1B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;EAqB3C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;EAgB9C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-base.d.ts","sourceRoot":"","sources":["../../src/styles/select-base.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAwCH,8EAA8E;AAC9E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAAkC,CAAC;AAErF,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"select-base.d.ts","sourceRoot":"","sources":["../../src/styles/select-base.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAwCH,8EAA8E;AAC9E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAAkC,CAAC;AAErF,eAAO,MAAM,gBAAgB,QAi6B5B,CAAC"}
|
|
@@ -272,8 +272,16 @@ export const selectBaseStyles = `
|
|
|
272
272
|
|
|
273
273
|
/* Open state — same escalation as ty-input's .focused: bolder border + ring.
|
|
274
274
|
Applies whenever the stub stays visible while open (field skin without
|
|
275
|
-
the opacity-hide above kicking in — e.g. single-select with no tags).
|
|
276
|
-
|
|
275
|
+
the opacity-hide above kicking in — e.g. single-select with no tags).
|
|
276
|
+
:not(.custom-trigger) — that skin has its own unconditional box-shadow:
|
|
277
|
+
none reset below; excluding it here keeps the two rules from competing
|
|
278
|
+
on specificity (:has()/:not() here would otherwise outrank it).
|
|
279
|
+
:not(:has(search:focus)) — the search row auto-focuses on open, which
|
|
280
|
+
already carries its own real :focus ring (below); without this guard the
|
|
281
|
+
stub's "fake" open-ring stacks on top of it, and the field reads as two
|
|
282
|
+
simultaneously-focused controls. Real focus wins; the stub ring is only
|
|
283
|
+
for select skins that have nothing else to show it. */
|
|
284
|
+
.dropdown-wrapper:has(.dropdown-chevron.open):not(:has(.dropdown-search-input:focus)) .select-stub:not(.custom-trigger),
|
|
277
285
|
.select-stub:focus,
|
|
278
286
|
.select-stub:focus-visible {
|
|
279
287
|
border-color: var(--select-accent-bold, var(--input-border-focus, var(--ty-input-border-focus)));
|
|
@@ -368,8 +376,14 @@ export const selectBaseStyles = `
|
|
|
368
376
|
/* Options area styling - Override for select */
|
|
369
377
|
.dropdown-options {
|
|
370
378
|
opacity: 0;
|
|
371
|
-
|
|
372
|
-
|
|
379
|
+
/* Floating surface/border, not --input-* — this is a popup panel over
|
|
380
|
+
arbitrary page content, not a form field. --ty-input-border resolves to
|
|
381
|
+
the deliberately-faint resting-state input border (barely visible by
|
|
382
|
+
design, escalates on hover/focus); reused here it made the popup's own
|
|
383
|
+
edge nearly invisible against the page behind it. --ty-floating-border
|
|
384
|
+
is the token tuned for exactly this: floating panels over content. */
|
|
385
|
+
background: var(--ty-surface-floating);
|
|
386
|
+
border: 1px solid var(--ty-floating-border);
|
|
373
387
|
border-radius: var(--ty-radius-lg);
|
|
374
388
|
max-height: 16rem;
|
|
375
389
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-base.js","sourceRoot":"","sources":["../../src/styles/select-base.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D;;;;;;2CAM2C;AAC3C,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC9C,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CACtB,EAAE;QACA,CAAC,CAAC,CAAC;YACD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,CAAC,oBAAoB,EAAE,GAAG,CAAC,KAAK;YAC7E,CAAC,CAAC,kBAAkB,CAAC,oBAAoB,EAAE,IAAI;QACjD,CAAC,CAAC,CAAC;YACD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,CAAC,IAAI;YAClD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC;IAC/B,OAAO;iBACQ,CAAC;oCACkB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC;0BACjC,CAAC,CAAC,EAAE,CAAC;uCACQ,CAAC,CAAC,EAAE,CAAC;;iBAE3B,CAAC;qBACG,CAAC,CAAC,EAAE,CAAC;0BACA,CAAC,CAAC,SAAS,CAAC;uCACC,CAAC,CAAC,SAAS,CAAC;;iBAElC,CAAC;qBACG,CAAC,CAAC,QAAQ,CAAC;0BACN,CAAC,CAAC,OAAO,CAAC;uCACG,CAAC,CAAC,OAAO,CAAC;;CAEhD,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAErF,MAAM,CAAC,MAAM,gBAAgB,GAAG
|
|
1
|
+
{"version":3,"file":"select-base.js","sourceRoot":"","sources":["../../src/styles/select-base.ts"],"names":[],"mappings":"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"}
|
package/lib/styles/select.d.ts
CHANGED
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
* - .compact: content-hugging trigger for toolbars, count badge
|
|
9
9
|
* - .custom-trigger (slot="trigger"): all chrome stripped
|
|
10
10
|
*/
|
|
11
|
-
export declare const selectStyles = "\n/* ===== COMPACT skin: hugs content (field skin = base styles) ===== */\n.select-stub.compact {\n display: inline-flex;\n flex-wrap: nowrap;\n width: auto;\n gap: 0.5rem;\n /* extra right padding = room for the absolutely-positioned chevron */\n padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot=\"trigger\"): no chrome at all */\n.select-stub.custom-trigger {\n display: inline-block;\n border: none;\n background: none;\n padding: 0;\n min-height: 0;\n border-radius: 0;\n}\n.select-stub.custom-trigger:hover {\n border: none;\n}\n\n.select-count {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.375rem;\n border-radius: 9999px;\n /* --ty-text-primary never existed as a token \u2014 this silently fell back\n to inherited/unset color. Now follows the select's own flavor. */\n background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);\n color: var(--select-accent-bold, var(--ty-color-primary-strong));\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n font-style: normal;\n}\n.select-count[hidden] {\n display: none;\n}\n/* Selection text (field skin): single line, ellipsis, input colors */\n.select-stub .dropdown-placeholder {\n font-style: normal;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--input-color, var(--ty-input-color));\n}\n\n/* Empty state: muted placeholder color */\n.select-stub .dropdown-placeholder.placeholder-shown {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.select-stub .dropdown-placeholder[hidden] {\n display: none;\n}\n\n/* Single-select display clone (slot=\"selected\"): the selected ty-option\n projected into the stub \u2014 its own :host([cloned]) styling strips the\n list-row chrome; here it just takes the text's flex slot. */\n.select-stub slot[name=\"selected\"] {\n display: none;\n}\n.select-stub.has-clone slot[name=\"selected\"] {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n}\n.select-stub.compact.has-clone slot[name=\"selected\"] {\n flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) \u2014 spacing comes from the stub's flex\n gap; muted like ty-input adornments. end sits before the chevron. */\n.select-stub ::slotted([slot=\"start\"]),\n.select-stub ::slotted([slot=\"end\"]) {\n flex-shrink: 0;\n color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label \u2014 no grow, regular text color */\n.select-stub.compact .dropdown-placeholder {\n flex-grow: 0;\n color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (the popup hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ===== One-panel popup: search header fused with the options list ===== */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n (base styles) and sits inset in the panel, TagPicker-style \u2014 no divider,\n whitespace separates it from the list. */\n.dropdown-header {\n background: var(--input-bg, var(--ty-input-bg));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n margin-top: 0;\n border-top: none;\n border-bottom: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n position: absolute;\n top: 50%;\n left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n pointer-events: none;\n}\n.dropdown-search-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input. Same 32x32\n footprint as .mobile-close-button (18px glyph centered in the box, not a\n bare 18px glyph flush at the edge) so the row has two matching bookends \u2014\n a bare icon on one side and a 32px circle on the other read as lopsided\n even with equal flex gap on both sides. Matching them also centers the\n search input's flex:1 fill symmetrically between the two. Fixed white +\n 18px glyph, same reasoning as .mobile-header-label \u2014 this sits on the\n dark ::backdrop blur in both themes, not a theme surface. */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n position: static;\n transform: none;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n color: #ffffff;\n}\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n min-height: 2.25rem;\n padding-right: var(--ty-spacing-2);\n /* room for the magnifier adornment */\n padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n itself receives focus on open \u2014 suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n outline: none;\n}\n\n/* Search row hidden ('auto' below threshold / searchable=\"false\"):\n the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n flex-direction: column;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: 0;\n /* Card-style list: rounded rows sit inset from the panel edges */\n padding: var(--ty-spacing-1);\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n transform: none;\n transition: none;\n /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options \u2014\n the base layer styles it as a floating card (radius + shadow), which left a\n see-through gap under the search header while loading. */\n.dropdown-loading {\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n display: block;\n width: 100%;\n}\n";
|
|
11
|
+
export declare const selectStyles = "\n/* ===== COMPACT skin: hugs content (field skin = base styles) ===== */\n.select-stub.compact {\n display: inline-flex;\n flex-wrap: nowrap;\n width: auto;\n gap: 0.5rem;\n /* extra right padding = room for the absolutely-positioned chevron */\n padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot=\"trigger\"): no chrome at all */\n.select-stub.custom-trigger {\n display: inline-block;\n width: auto;\n border: none;\n background: none;\n padding: 0;\n min-height: 0;\n border-radius: 0;\n}\n.select-stub.custom-trigger:hover {\n border: none;\n}\n\n.select-count {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.375rem;\n border-radius: 9999px;\n /* --ty-text-primary never existed as a token \u2014 this silently fell back\n to inherited/unset color. Now follows the select's own flavor. */\n background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);\n color: var(--select-accent-bold, var(--ty-color-primary-strong));\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n font-style: normal;\n}\n.select-count[hidden] {\n display: none;\n}\n/* Selection text (field skin): single line, ellipsis, input colors */\n.select-stub .dropdown-placeholder {\n font-style: normal;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--input-color, var(--ty-input-color));\n}\n\n/* Empty state: muted placeholder color */\n.select-stub .dropdown-placeholder.placeholder-shown {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.select-stub .dropdown-placeholder[hidden] {\n display: none;\n}\n\n/* Single-select display clone (slot=\"selected\"): the selected ty-option\n projected into the stub \u2014 its own :host([cloned]) styling strips the\n list-row chrome; here it just takes the text's flex slot. */\n.select-stub slot[name=\"selected\"] {\n display: none;\n}\n.select-stub.has-clone slot[name=\"selected\"] {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n}\n.select-stub.compact.has-clone slot[name=\"selected\"] {\n flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) \u2014 spacing comes from the stub's flex\n gap; muted like ty-input adornments. end sits before the chevron. */\n.select-stub ::slotted([slot=\"start\"]),\n.select-stub ::slotted([slot=\"end\"]) {\n flex-shrink: 0;\n color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label \u2014 no grow, regular text color */\n.select-stub.compact .dropdown-placeholder {\n flex-grow: 0;\n color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (the popup hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ===== One-panel popup: search header fused with the options list ===== */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n (base styles) and sits inset in the panel, TagPicker-style \u2014 no divider,\n whitespace separates it from the list. */\n.dropdown-header {\n background: var(--input-bg, var(--ty-input-bg));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n margin-top: 0;\n border-top: none;\n border-bottom: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n position: absolute;\n top: 50%;\n left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n pointer-events: none;\n}\n.dropdown-search-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input. Same 32x32\n footprint as .mobile-close-button (18px glyph centered in the box, not a\n bare 18px glyph flush at the edge) so the row has two matching bookends \u2014\n a bare icon on one side and a 32px circle on the other read as lopsided\n even with equal flex gap on both sides. Matching them also centers the\n search input's flex:1 fill symmetrically between the two. Fixed white +\n 18px glyph, same reasoning as .mobile-header-label \u2014 this sits on the\n dark ::backdrop blur in both themes, not a theme surface. */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n position: static;\n transform: none;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n color: #ffffff;\n}\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n min-height: 2.25rem;\n padding-right: var(--ty-spacing-2);\n /* room for the magnifier adornment */\n padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n itself receives focus on open \u2014 suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n outline: none;\n}\n\n/* Search row hidden ('auto' below threshold / searchable=\"false\"):\n the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n flex-direction: column;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: 0;\n /* Card-style list: rounded rows sit inset from the panel edges */\n padding: var(--ty-spacing-1);\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n transform: none;\n transition: none;\n /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options \u2014\n the base layer styles it as a floating card (radius + shadow), which left a\n see-through gap under the search header while loading. */\n.dropdown-loading {\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n display: block;\n width: 100%;\n}\n";
|
|
12
12
|
//# sourceMappingURL=select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,YAAY,uoQAwPxB,CAAC"}
|
package/lib/styles/select.js
CHANGED
package/lib/styles/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwP3B,CAAC"}
|
package/lib/styles/tag.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqCH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqCH,eAAO,MAAM,SAAS,QA8QrB,CAAC"}
|
package/lib/styles/tag.js
CHANGED
|
@@ -52,7 +52,10 @@ export const tagStyles = `
|
|
|
52
52
|
gap: var(--ty-spacing-1);
|
|
53
53
|
/* Default pill shape - can be overridden */
|
|
54
54
|
border-radius: var(--ty-radius-full);
|
|
55
|
-
|
|
55
|
+
/* Mode-flipped weight dial (tyrell.css): 440 light / 400 dark. Chips are
|
|
56
|
+
labels, not actions — they run lighter than buttons. Override with
|
|
57
|
+
--ty-weight-label at any scope. */
|
|
58
|
+
font-weight: var(--ty-weight-label, 440);
|
|
56
59
|
text-align: center;
|
|
57
60
|
white-space: nowrap;
|
|
58
61
|
user-select: none;
|
package/lib/styles/tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C;gDACgD;AAChD,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;AAE5D,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC;WACtB,CAAC,CAAC,WAAW,EAAE;iBACT,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;0BACQ,CAAC;gCACK,CAAC;uCACM,CAAC;;iBAEvB,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;iBACD,CAAC;iBACD,CAAC;4BACU,CAAC;;iBAEZ,CAAC;iBACD,CAAC;iBACD,CAAC;yCACuB,CAAC;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG
|
|
1
|
+
{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C;gDACgD;AAChD,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;AAE5D,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC;WACtB,CAAC,CAAC,WAAW,EAAE;iBACT,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;0BACQ,CAAC;gCACK,CAAC;uCACM,CAAC;;iBAEvB,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;iBACD,CAAC;iBACD,CAAC;4BACU,CAAC;;iBAEZ,CAAC;iBACD,CAAC;iBACD,CAAC;yCACuB,CAAC;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkMvB,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EtC,CAAC"}
|
package/lib/version.d.ts
CHANGED
package/lib/version.js
CHANGED