@latty-ds/web 0.9.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/custom-elements.json +75 -5
  2. package/dist/components/accordion/index.js +42 -6
  3. package/dist/components/alert/index.js +70 -6
  4. package/dist/components/button/button.d.ts +6 -0
  5. package/dist/components/button/index.js +28 -0
  6. package/dist/components/color-input/index.js +42 -6
  7. package/dist/components/combobox/index.js +42 -6
  8. package/dist/components/date-input/index.js +42 -6
  9. package/dist/components/datepicker/index.js +42 -6
  10. package/dist/components/dialog/dialog.d.ts +11 -0
  11. package/dist/components/dialog/index.js +80 -7
  12. package/dist/components/dropdown/dropdown.d.ts +2 -0
  13. package/dist/components/dropdown/index.js +1 -0
  14. package/dist/components/icon-button/icon-button.d.ts +6 -0
  15. package/dist/components/icon-button/index.js +28 -0
  16. package/dist/components/radio-group/index.js +42 -6
  17. package/dist/components/select/index.js +51 -7
  18. package/dist/components/sidepanel/index.js +75 -10
  19. package/dist/components/sidepanel/sidepanel.d.ts +2 -0
  20. package/dist/components/slider/index.js +42 -6
  21. package/dist/components/snackbar/index.js +9 -1
  22. package/dist/components/snackbar/snackbar.d.ts +11 -0
  23. package/dist/components/text/index.js +42 -6
  24. package/dist/components/text/text.d.ts +1 -0
  25. package/dist/components/textfield/index.js +42 -6
  26. package/dist/components/tooltip/index.js +42 -6
  27. package/dist/css/latty.css +1 -1
  28. package/dist/index.cjs +132 -13
  29. package/dist/index.js +132 -13
  30. package/dist/manifest.json +36 -0
  31. package/package.json +3 -3
package/dist/components/color-input/index.js CHANGED
@@ -218,61 +218,97 @@ var textStyles = css2`
218
218
  /* ── Display ─────────────────────────────────────────────────────────── */
219
219
 
220
220
  :host([variant='display-2xl']) [part='base'] {
221
+ font-family: var(
222
+ --lt-typography-fontFamilyHeading,
223
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
224
+ );
221
225
  font-size: clamp(2.5rem, 6vw, 4.5rem);
222
226
  font-weight: var(--lt-text-weight, 200);
223
227
  line-height: 1.1;
224
- letter-spacing: -0.02em;
228
+ letter-spacing: var(--lt-text-tracking, -0.02em);
225
229
  }
226
230
 
227
231
  :host([variant='display-xl']) [part='base'] {
232
+ font-family: var(
233
+ --lt-typography-fontFamilyHeading,
234
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
235
+ );
228
236
  font-size: clamp(2rem, 5vw, 3.75rem);
229
237
  font-weight: var(--lt-text-weight, 200);
230
238
  line-height: 1.1;
231
- letter-spacing: -0.02em;
239
+ letter-spacing: var(--lt-text-tracking, -0.02em);
232
240
  }
233
241
 
234
242
  :host([variant='display-lg']) [part='base'] {
243
+ font-family: var(
244
+ --lt-typography-fontFamilyHeading,
245
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
246
+ );
235
247
  font-size: clamp(2rem, 4vw, 3rem);
236
248
  font-weight: var(--lt-text-weight, 200);
237
249
  line-height: 1.15;
238
- letter-spacing: -0.01em;
250
+ letter-spacing: var(--lt-text-tracking, -0.01em);
239
251
  }
240
252
 
241
253
  /* ── Headings ─────────────────────────────────────────────────────────── */
242
254
 
243
255
  :host([variant='h1']) [part='base'] {
256
+ font-family: var(
257
+ --lt-typography-fontFamilyHeading,
258
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
259
+ );
244
260
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
245
261
  font-weight: var(--lt-text-weight, 600);
246
262
  line-height: 1.2;
247
- letter-spacing: -0.02em;
263
+ letter-spacing: var(--lt-text-tracking, -0.02em);
248
264
  }
249
265
 
250
266
  :host([variant='h2']) [part='base'] {
267
+ font-family: var(
268
+ --lt-typography-fontFamilyHeading,
269
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
270
+ );
251
271
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
252
272
  font-weight: var(--lt-text-weight, 600);
253
273
  line-height: 1.25;
254
- letter-spacing: -0.01em;
274
+ letter-spacing: var(--lt-text-tracking, -0.01em);
255
275
  }
256
276
 
257
277
  :host([variant='h3']) [part='base'] {
278
+ font-family: var(
279
+ --lt-typography-fontFamilyHeading,
280
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
281
+ );
258
282
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
259
283
  font-weight: var(--lt-text-weight, 600);
260
284
  line-height: 1.3;
261
285
  }
262
286
 
263
287
  :host([variant='h4']) [part='base'] {
288
+ font-family: var(
289
+ --lt-typography-fontFamilyHeading,
290
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
291
+ );
264
292
  font-size: 1.25rem;
265
293
  font-weight: var(--lt-text-weight, 600);
266
294
  line-height: 1.35;
267
295
  }
268
296
 
269
297
  :host([variant='h5']) [part='base'] {
298
+ font-family: var(
299
+ --lt-typography-fontFamilyHeading,
300
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
301
+ );
270
302
  font-size: 1.125rem;
271
303
  font-weight: var(--lt-text-weight, 600);
272
304
  line-height: 1.4;
273
305
  }
274
306
 
275
307
  :host([variant='h6']) [part='base'] {
308
+ font-family: var(
309
+ --lt-typography-fontFamilyHeading,
310
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
311
+ );
276
312
  font-size: 1rem;
277
313
  font-weight: var(--lt-text-weight, 600);
278
314
  line-height: 1.4;
@@ -311,7 +347,7 @@ var textStyles = css2`
311
347
  font-size: 0.6875rem;
312
348
  font-weight: var(--lt-text-weight, 600);
313
349
  line-height: 1.2;
314
- letter-spacing: 0.08em;
350
+ letter-spacing: var(--lt-text-tracking, 0.08em);
315
351
  text-transform: uppercase;
316
352
  }
317
353
 
package/dist/components/combobox/index.js CHANGED
@@ -1654,61 +1654,97 @@ var textStyles = css3`
1654
1654
  /* ── Display ─────────────────────────────────────────────────────────── */
1655
1655
 
1656
1656
  :host([variant='display-2xl']) [part='base'] {
1657
+ font-family: var(
1658
+ --lt-typography-fontFamilyHeading,
1659
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1660
+ );
1657
1661
  font-size: clamp(2.5rem, 6vw, 4.5rem);
1658
1662
  font-weight: var(--lt-text-weight, 200);
1659
1663
  line-height: 1.1;
1660
- letter-spacing: -0.02em;
1664
+ letter-spacing: var(--lt-text-tracking, -0.02em);
1661
1665
  }
1662
1666
 
1663
1667
  :host([variant='display-xl']) [part='base'] {
1668
+ font-family: var(
1669
+ --lt-typography-fontFamilyHeading,
1670
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1671
+ );
1664
1672
  font-size: clamp(2rem, 5vw, 3.75rem);
1665
1673
  font-weight: var(--lt-text-weight, 200);
1666
1674
  line-height: 1.1;
1667
- letter-spacing: -0.02em;
1675
+ letter-spacing: var(--lt-text-tracking, -0.02em);
1668
1676
  }
1669
1677
 
1670
1678
  :host([variant='display-lg']) [part='base'] {
1679
+ font-family: var(
1680
+ --lt-typography-fontFamilyHeading,
1681
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1682
+ );
1671
1683
  font-size: clamp(2rem, 4vw, 3rem);
1672
1684
  font-weight: var(--lt-text-weight, 200);
1673
1685
  line-height: 1.15;
1674
- letter-spacing: -0.01em;
1686
+ letter-spacing: var(--lt-text-tracking, -0.01em);
1675
1687
  }
1676
1688
 
1677
1689
  /* ── Headings ─────────────────────────────────────────────────────────── */
1678
1690
 
1679
1691
  :host([variant='h1']) [part='base'] {
1692
+ font-family: var(
1693
+ --lt-typography-fontFamilyHeading,
1694
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1695
+ );
1680
1696
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
1681
1697
  font-weight: var(--lt-text-weight, 600);
1682
1698
  line-height: 1.2;
1683
- letter-spacing: -0.02em;
1699
+ letter-spacing: var(--lt-text-tracking, -0.02em);
1684
1700
  }
1685
1701
 
1686
1702
  :host([variant='h2']) [part='base'] {
1703
+ font-family: var(
1704
+ --lt-typography-fontFamilyHeading,
1705
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1706
+ );
1687
1707
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
1688
1708
  font-weight: var(--lt-text-weight, 600);
1689
1709
  line-height: 1.25;
1690
- letter-spacing: -0.01em;
1710
+ letter-spacing: var(--lt-text-tracking, -0.01em);
1691
1711
  }
1692
1712
 
1693
1713
  :host([variant='h3']) [part='base'] {
1714
+ font-family: var(
1715
+ --lt-typography-fontFamilyHeading,
1716
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1717
+ );
1694
1718
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
1695
1719
  font-weight: var(--lt-text-weight, 600);
1696
1720
  line-height: 1.3;
1697
1721
  }
1698
1722
 
1699
1723
  :host([variant='h4']) [part='base'] {
1724
+ font-family: var(
1725
+ --lt-typography-fontFamilyHeading,
1726
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1727
+ );
1700
1728
  font-size: 1.25rem;
1701
1729
  font-weight: var(--lt-text-weight, 600);
1702
1730
  line-height: 1.35;
1703
1731
  }
1704
1732
 
1705
1733
  :host([variant='h5']) [part='base'] {
1734
+ font-family: var(
1735
+ --lt-typography-fontFamilyHeading,
1736
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1737
+ );
1706
1738
  font-size: 1.125rem;
1707
1739
  font-weight: var(--lt-text-weight, 600);
1708
1740
  line-height: 1.4;
1709
1741
  }
1710
1742
 
1711
1743
  :host([variant='h6']) [part='base'] {
1744
+ font-family: var(
1745
+ --lt-typography-fontFamilyHeading,
1746
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1747
+ );
1712
1748
  font-size: 1rem;
1713
1749
  font-weight: var(--lt-text-weight, 600);
1714
1750
  line-height: 1.4;
@@ -1747,7 +1783,7 @@ var textStyles = css3`
1747
1783
  font-size: 0.6875rem;
1748
1784
  font-weight: var(--lt-text-weight, 600);
1749
1785
  line-height: 1.2;
1750
- letter-spacing: 0.08em;
1786
+ letter-spacing: var(--lt-text-tracking, 0.08em);
1751
1787
  text-transform: uppercase;
1752
1788
  }
1753
1789
 
package/dist/components/date-input/index.js CHANGED
@@ -998,61 +998,97 @@ var textStyles = css2`
998
998
  /* ── Display ─────────────────────────────────────────────────────────── */
999
999
 
1000
1000
  :host([variant='display-2xl']) [part='base'] {
1001
+ font-family: var(
1002
+ --lt-typography-fontFamilyHeading,
1003
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1004
+ );
1001
1005
  font-size: clamp(2.5rem, 6vw, 4.5rem);
1002
1006
  font-weight: var(--lt-text-weight, 200);
1003
1007
  line-height: 1.1;
1004
- letter-spacing: -0.02em;
1008
+ letter-spacing: var(--lt-text-tracking, -0.02em);
1005
1009
  }
1006
1010
 
1007
1011
  :host([variant='display-xl']) [part='base'] {
1012
+ font-family: var(
1013
+ --lt-typography-fontFamilyHeading,
1014
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1015
+ );
1008
1016
  font-size: clamp(2rem, 5vw, 3.75rem);
1009
1017
  font-weight: var(--lt-text-weight, 200);
1010
1018
  line-height: 1.1;
1011
- letter-spacing: -0.02em;
1019
+ letter-spacing: var(--lt-text-tracking, -0.02em);
1012
1020
  }
1013
1021
 
1014
1022
  :host([variant='display-lg']) [part='base'] {
1023
+ font-family: var(
1024
+ --lt-typography-fontFamilyHeading,
1025
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1026
+ );
1015
1027
  font-size: clamp(2rem, 4vw, 3rem);
1016
1028
  font-weight: var(--lt-text-weight, 200);
1017
1029
  line-height: 1.15;
1018
- letter-spacing: -0.01em;
1030
+ letter-spacing: var(--lt-text-tracking, -0.01em);
1019
1031
  }
1020
1032
 
1021
1033
  /* ── Headings ─────────────────────────────────────────────────────────── */
1022
1034
 
1023
1035
  :host([variant='h1']) [part='base'] {
1036
+ font-family: var(
1037
+ --lt-typography-fontFamilyHeading,
1038
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1039
+ );
1024
1040
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
1025
1041
  font-weight: var(--lt-text-weight, 600);
1026
1042
  line-height: 1.2;
1027
- letter-spacing: -0.02em;
1043
+ letter-spacing: var(--lt-text-tracking, -0.02em);
1028
1044
  }
1029
1045
 
1030
1046
  :host([variant='h2']) [part='base'] {
1047
+ font-family: var(
1048
+ --lt-typography-fontFamilyHeading,
1049
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1050
+ );
1031
1051
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
1032
1052
  font-weight: var(--lt-text-weight, 600);
1033
1053
  line-height: 1.25;
1034
- letter-spacing: -0.01em;
1054
+ letter-spacing: var(--lt-text-tracking, -0.01em);
1035
1055
  }
1036
1056
 
1037
1057
  :host([variant='h3']) [part='base'] {
1058
+ font-family: var(
1059
+ --lt-typography-fontFamilyHeading,
1060
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1061
+ );
1038
1062
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
1039
1063
  font-weight: var(--lt-text-weight, 600);
1040
1064
  line-height: 1.3;
1041
1065
  }
1042
1066
 
1043
1067
  :host([variant='h4']) [part='base'] {
1068
+ font-family: var(
1069
+ --lt-typography-fontFamilyHeading,
1070
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1071
+ );
1044
1072
  font-size: 1.25rem;
1045
1073
  font-weight: var(--lt-text-weight, 600);
1046
1074
  line-height: 1.35;
1047
1075
  }
1048
1076
 
1049
1077
  :host([variant='h5']) [part='base'] {
1078
+ font-family: var(
1079
+ --lt-typography-fontFamilyHeading,
1080
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1081
+ );
1050
1082
  font-size: 1.125rem;
1051
1083
  font-weight: var(--lt-text-weight, 600);
1052
1084
  line-height: 1.4;
1053
1085
  }
1054
1086
 
1055
1087
  :host([variant='h6']) [part='base'] {
1088
+ font-family: var(
1089
+ --lt-typography-fontFamilyHeading,
1090
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
1091
+ );
1056
1092
  font-size: 1rem;
1057
1093
  font-weight: var(--lt-text-weight, 600);
1058
1094
  line-height: 1.4;
@@ -1091,7 +1127,7 @@ var textStyles = css2`
1091
1127
  font-size: 0.6875rem;
1092
1128
  font-weight: var(--lt-text-weight, 600);
1093
1129
  line-height: 1.2;
1094
- letter-spacing: 0.08em;
1130
+ letter-spacing: var(--lt-text-tracking, 0.08em);
1095
1131
  text-transform: uppercase;
1096
1132
  }
1097
1133
 
package/dist/components/datepicker/index.js CHANGED
@@ -173,61 +173,97 @@ var textStyles = css2`
173
173
  /* ── Display ─────────────────────────────────────────────────────────── */
174
174
 
175
175
  :host([variant='display-2xl']) [part='base'] {
176
+ font-family: var(
177
+ --lt-typography-fontFamilyHeading,
178
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
179
+ );
176
180
  font-size: clamp(2.5rem, 6vw, 4.5rem);
177
181
  font-weight: var(--lt-text-weight, 200);
178
182
  line-height: 1.1;
179
- letter-spacing: -0.02em;
183
+ letter-spacing: var(--lt-text-tracking, -0.02em);
180
184
  }
181
185
 
182
186
  :host([variant='display-xl']) [part='base'] {
187
+ font-family: var(
188
+ --lt-typography-fontFamilyHeading,
189
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
190
+ );
183
191
  font-size: clamp(2rem, 5vw, 3.75rem);
184
192
  font-weight: var(--lt-text-weight, 200);
185
193
  line-height: 1.1;
186
- letter-spacing: -0.02em;
194
+ letter-spacing: var(--lt-text-tracking, -0.02em);
187
195
  }
188
196
 
189
197
  :host([variant='display-lg']) [part='base'] {
198
+ font-family: var(
199
+ --lt-typography-fontFamilyHeading,
200
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
201
+ );
190
202
  font-size: clamp(2rem, 4vw, 3rem);
191
203
  font-weight: var(--lt-text-weight, 200);
192
204
  line-height: 1.15;
193
- letter-spacing: -0.01em;
205
+ letter-spacing: var(--lt-text-tracking, -0.01em);
194
206
  }
195
207
 
196
208
  /* ── Headings ─────────────────────────────────────────────────────────── */
197
209
 
198
210
  :host([variant='h1']) [part='base'] {
211
+ font-family: var(
212
+ --lt-typography-fontFamilyHeading,
213
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
214
+ );
199
215
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
200
216
  font-weight: var(--lt-text-weight, 600);
201
217
  line-height: 1.2;
202
- letter-spacing: -0.02em;
218
+ letter-spacing: var(--lt-text-tracking, -0.02em);
203
219
  }
204
220
 
205
221
  :host([variant='h2']) [part='base'] {
222
+ font-family: var(
223
+ --lt-typography-fontFamilyHeading,
224
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
225
+ );
206
226
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
207
227
  font-weight: var(--lt-text-weight, 600);
208
228
  line-height: 1.25;
209
- letter-spacing: -0.01em;
229
+ letter-spacing: var(--lt-text-tracking, -0.01em);
210
230
  }
211
231
 
212
232
  :host([variant='h3']) [part='base'] {
233
+ font-family: var(
234
+ --lt-typography-fontFamilyHeading,
235
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
236
+ );
213
237
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
214
238
  font-weight: var(--lt-text-weight, 600);
215
239
  line-height: 1.3;
216
240
  }
217
241
 
218
242
  :host([variant='h4']) [part='base'] {
243
+ font-family: var(
244
+ --lt-typography-fontFamilyHeading,
245
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
246
+ );
219
247
  font-size: 1.25rem;
220
248
  font-weight: var(--lt-text-weight, 600);
221
249
  line-height: 1.35;
222
250
  }
223
251
 
224
252
  :host([variant='h5']) [part='base'] {
253
+ font-family: var(
254
+ --lt-typography-fontFamilyHeading,
255
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
256
+ );
225
257
  font-size: 1.125rem;
226
258
  font-weight: var(--lt-text-weight, 600);
227
259
  line-height: 1.4;
228
260
  }
229
261
 
230
262
  :host([variant='h6']) [part='base'] {
263
+ font-family: var(
264
+ --lt-typography-fontFamilyHeading,
265
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
266
+ );
231
267
  font-size: 1rem;
232
268
  font-weight: var(--lt-text-weight, 600);
233
269
  line-height: 1.4;
@@ -266,7 +302,7 @@ var textStyles = css2`
266
302
  font-size: 0.6875rem;
267
303
  font-weight: var(--lt-text-weight, 600);
268
304
  line-height: 1.2;
269
- letter-spacing: 0.08em;
305
+ letter-spacing: var(--lt-text-tracking, 0.08em);
270
306
  text-transform: uppercase;
271
307
  }
272
308
 
package/dist/components/dialog/dialog.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ThemeableElement } from '../../base';
2
2
  import { DialogSize } from './dialog.types';
3
+ import type { SurfaceElevation, SurfaceAppearance } from '../surface/surface.types';
3
4
  import '../icon-button/icon-button';
4
5
  import '../surface/surface';
5
6
  import '../text/text';
@@ -88,6 +89,16 @@ export declare class Dialog extends ThemeableElement {
88
89
  * @default false
89
90
  */
90
91
  backdropBlur: boolean;
92
+ /**
93
+ * Elevation level of the internal surface, matching `lt-surface`'s scale.
94
+ * @default '4'
95
+ */
96
+ elevation: SurfaceElevation;
97
+ /**
98
+ * Visual appearance of the internal surface, matching `lt-surface`'s vocabulary.
99
+ * @default 'filled'
100
+ */
101
+ appearance: SurfaceAppearance;
91
102
  private dialogElement?;
92
103
  private previouslyFocusedElement?;
93
104
  /**
package/dist/components/dialog/index.js CHANGED
@@ -400,6 +400,30 @@ var iconButtonStyles = css3`
400
400
  --_active-bg: var(--lt-bg-info-subtle);
401
401
  }
402
402
 
403
+ /* bordered — adds a border on top of whatever appearance is active; a no-op on
404
+ outlined, which already sets the same border color. */
405
+ :host([bordered][variant='primary']) {
406
+ --_border-color: var(--lt-border-primary-strong);
407
+ }
408
+ :host([bordered][variant='secondary']) {
409
+ --_border-color: var(--lt-border-secondary-strong);
410
+ }
411
+ :host([bordered][variant='neutral']) {
412
+ --_border-color: var(--lt-border-strong);
413
+ }
414
+ :host([bordered][variant='success']) {
415
+ --_border-color: var(--lt-border-success-strong);
416
+ }
417
+ :host([bordered][variant='warning']) {
418
+ --_border-color: var(--lt-border-warning-strong);
419
+ }
420
+ :host([bordered][variant='error']) {
421
+ --_border-color: var(--lt-border-error-strong);
422
+ }
423
+ :host([bordered][variant='info']) {
424
+ --_border-color: var(--lt-border-info-strong);
425
+ }
426
+
403
427
  /* round shape */
404
428
  :host([round]) [part='base'] {
405
429
  border-radius: 50%;
@@ -449,6 +473,7 @@ var IconButton = class extends ThemeableElement {
449
473
  this.label = "";
450
474
  this.variant = "neutral";
451
475
  this.appearance = "ghost";
476
+ this.bordered = false;
452
477
  this.size = "md";
453
478
  this.disabled = false;
454
479
  this.href = "";
@@ -495,6 +520,9 @@ __decorateClass([
495
520
  __decorateClass([
496
521
  property2({ reflect: true })
497
522
  ], IconButton.prototype, "appearance", 2);
523
+ __decorateClass([
524
+ property2({ type: Boolean, reflect: true })
525
+ ], IconButton.prototype, "bordered", 2);
498
526
  __decorateClass([
499
527
  property2({ reflect: true })
500
528
  ], IconButton.prototype, "size", 2);
@@ -636,61 +664,97 @@ var textStyles = css5`
636
664
  /* ── Display ─────────────────────────────────────────────────────────── */
637
665
 
638
666
  :host([variant='display-2xl']) [part='base'] {
667
+ font-family: var(
668
+ --lt-typography-fontFamilyHeading,
669
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
670
+ );
639
671
  font-size: clamp(2.5rem, 6vw, 4.5rem);
640
672
  font-weight: var(--lt-text-weight, 200);
641
673
  line-height: 1.1;
642
- letter-spacing: -0.02em;
674
+ letter-spacing: var(--lt-text-tracking, -0.02em);
643
675
  }
644
676
 
645
677
  :host([variant='display-xl']) [part='base'] {
678
+ font-family: var(
679
+ --lt-typography-fontFamilyHeading,
680
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
681
+ );
646
682
  font-size: clamp(2rem, 5vw, 3.75rem);
647
683
  font-weight: var(--lt-text-weight, 200);
648
684
  line-height: 1.1;
649
- letter-spacing: -0.02em;
685
+ letter-spacing: var(--lt-text-tracking, -0.02em);
650
686
  }
651
687
 
652
688
  :host([variant='display-lg']) [part='base'] {
689
+ font-family: var(
690
+ --lt-typography-fontFamilyHeading,
691
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
692
+ );
653
693
  font-size: clamp(2rem, 4vw, 3rem);
654
694
  font-weight: var(--lt-text-weight, 200);
655
695
  line-height: 1.15;
656
- letter-spacing: -0.01em;
696
+ letter-spacing: var(--lt-text-tracking, -0.01em);
657
697
  }
658
698
 
659
699
  /* ── Headings ─────────────────────────────────────────────────────────── */
660
700
 
661
701
  :host([variant='h1']) [part='base'] {
702
+ font-family: var(
703
+ --lt-typography-fontFamilyHeading,
704
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
705
+ );
662
706
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
663
707
  font-weight: var(--lt-text-weight, 600);
664
708
  line-height: 1.2;
665
- letter-spacing: -0.02em;
709
+ letter-spacing: var(--lt-text-tracking, -0.02em);
666
710
  }
667
711
 
668
712
  :host([variant='h2']) [part='base'] {
713
+ font-family: var(
714
+ --lt-typography-fontFamilyHeading,
715
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
716
+ );
669
717
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
670
718
  font-weight: var(--lt-text-weight, 600);
671
719
  line-height: 1.25;
672
- letter-spacing: -0.01em;
720
+ letter-spacing: var(--lt-text-tracking, -0.01em);
673
721
  }
674
722
 
675
723
  :host([variant='h3']) [part='base'] {
724
+ font-family: var(
725
+ --lt-typography-fontFamilyHeading,
726
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
727
+ );
676
728
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
677
729
  font-weight: var(--lt-text-weight, 600);
678
730
  line-height: 1.3;
679
731
  }
680
732
 
681
733
  :host([variant='h4']) [part='base'] {
734
+ font-family: var(
735
+ --lt-typography-fontFamilyHeading,
736
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
737
+ );
682
738
  font-size: 1.25rem;
683
739
  font-weight: var(--lt-text-weight, 600);
684
740
  line-height: 1.35;
685
741
  }
686
742
 
687
743
  :host([variant='h5']) [part='base'] {
744
+ font-family: var(
745
+ --lt-typography-fontFamilyHeading,
746
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
747
+ );
688
748
  font-size: 1.125rem;
689
749
  font-weight: var(--lt-text-weight, 600);
690
750
  line-height: 1.4;
691
751
  }
692
752
 
693
753
  :host([variant='h6']) [part='base'] {
754
+ font-family: var(
755
+ --lt-typography-fontFamilyHeading,
756
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
757
+ );
694
758
  font-size: 1rem;
695
759
  font-weight: var(--lt-text-weight, 600);
696
760
  line-height: 1.4;
@@ -729,7 +793,7 @@ var textStyles = css5`
729
793
  font-size: 0.6875rem;
730
794
  font-weight: var(--lt-text-weight, 600);
731
795
  line-height: 1.2;
732
- letter-spacing: 0.08em;
796
+ letter-spacing: var(--lt-text-tracking, 0.08em);
733
797
  text-transform: uppercase;
734
798
  }
735
799
 
@@ -792,6 +856,8 @@ var Dialog = class extends ThemeableElement {
792
856
  this.closeOnEscape = true;
793
857
  this.uppercase = false;
794
858
  this.backdropBlur = false;
859
+ this.elevation = "4";
860
+ this.appearance = "filled";
795
861
  this.handleKeydown = (event) => {
796
862
  if (this.open && this.closeOnEscape && event.key === "Escape") {
797
863
  event.preventDefault();
@@ -869,7 +935,8 @@ var Dialog = class extends ThemeableElement {
869
935
  return html4`
870
936
  <div class="backdrop" ?inert=${!this.open} @click=${this.handleBackdropClick} part="backdrop">
871
937
  <lt-surface
872
- elevation="4"
938
+ elevation=${this.elevation}
939
+ appearance=${this.appearance}
873
940
  role="dialog"
874
941
  aria-modal="true"
875
942
  aria-labelledby="dialog-title"
@@ -936,6 +1003,12 @@ __decorateClass([
936
1003
  __decorateClass([
937
1004
  property5({ type: Boolean, reflect: true, attribute: "backdrop-blur" })
938
1005
  ], Dialog.prototype, "backdropBlur", 2);
1006
+ __decorateClass([
1007
+ property5({ reflect: true })
1008
+ ], Dialog.prototype, "elevation", 2);
1009
+ __decorateClass([
1010
+ property5({ reflect: true })
1011
+ ], Dialog.prototype, "appearance", 2);
939
1012
  __decorateClass([
940
1013
  query("lt-surface")
941
1014
  ], Dialog.prototype, "dialogElement", 2);
package/dist/components/dropdown/dropdown.d.ts CHANGED
@@ -10,6 +10,8 @@ import '../surface/surface';
10
10
  * @slot - Menu items (lt-dropdown-item elements)
11
11
  * @fires {CustomEvent} open - Fired when the menu opens
12
12
  * @fires {CustomEvent} close - Fired when the menu closes
13
+ *
14
+ * @cssprop [--lt-dropdown-menu-padding] - Overrides the menu surface's default vertical padding.
13
15
  */
14
16
  export declare class Dropdown extends ThemeableElement {
15
17
  static styles: import("lit").CSSResult[];
package/dist/components/dropdown/index.js CHANGED
@@ -1447,6 +1447,7 @@ var dropdownStyles = [
1447
1447
 
1448
1448
  lt-surface.menu::part(surface) {
1449
1449
  overflow: hidden;
1450
+ padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2));
1450
1451
  }
1451
1452
  `
1452
1453
  ];