@latty-ds/web 0.8.1 → 0.10.0

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 (45) hide show
  1. package/custom-elements.json +103 -33
  2. package/dist/components/accordion/index.js +44 -8
  3. package/dist/components/alert/index.js +72 -8
  4. package/dist/components/avatar/index.js +1 -1
  5. package/dist/components/badge/index.js +1 -1
  6. package/dist/components/breadcrumb/index.js +1 -1
  7. package/dist/components/button/button.d.ts +6 -0
  8. package/dist/components/button/index.js +29 -1
  9. package/dist/components/calendar/index.js +1 -1
  10. package/dist/components/checkbox/index.js +1 -1
  11. package/dist/components/chip/index.js +1 -1
  12. package/dist/components/color-input/index.js +44 -8
  13. package/dist/components/combobox/index.js +44 -8
  14. package/dist/components/date-input/index.js +45 -9
  15. package/dist/components/datepicker/index.js +44 -8
  16. package/dist/components/dialog/dialog.d.ts +11 -0
  17. package/dist/components/dialog/index.js +83 -10
  18. package/dist/components/divider/index.js +1 -1
  19. package/dist/components/dropdown/dropdown.d.ts +2 -0
  20. package/dist/components/dropdown/index.js +4 -3
  21. package/dist/components/icon-button/icon-button.d.ts +6 -0
  22. package/dist/components/icon-button/index.js +28 -0
  23. package/dist/components/list/index.js +1 -1
  24. package/dist/components/pagination/index.js +1 -1
  25. package/dist/components/radio/index.js +1 -1
  26. package/dist/components/radio-group/index.js +44 -8
  27. package/dist/components/select/index.js +54 -10
  28. package/dist/components/sidepanel/index.js +76 -11
  29. package/dist/components/sidepanel/sidepanel.d.ts +2 -0
  30. package/dist/components/slider/index.js +44 -8
  31. package/dist/components/snackbar/index.js +11 -3
  32. package/dist/components/snackbar/snackbar.d.ts +11 -0
  33. package/dist/components/surface/index.js +1 -1
  34. package/dist/components/switch/index.js +1 -1
  35. package/dist/components/tab/index.js +1 -1
  36. package/dist/components/tab-group/index.js +2 -2
  37. package/dist/components/table/index.js +1 -1
  38. package/dist/components/text/index.js +43 -7
  39. package/dist/components/text/text.d.ts +1 -0
  40. package/dist/components/textfield/index.js +44 -8
  41. package/dist/components/tooltip/index.js +43 -7
  42. package/dist/index.cjs +163 -44
  43. package/dist/index.js +163 -44
  44. package/dist/manifest.json +36 -0
  45. package/package.json +3 -3
package/dist/components/slider/index.js CHANGED
@@ -42,7 +42,7 @@ import { css } from "lit";
42
42
  var sliderStyles = css`
43
43
  :host {
44
44
  display: block;
45
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
45
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
46
46
  width: 100%;
47
47
  }
48
48
 
@@ -310,67 +310,103 @@ var textStyles = css3`
310
310
  [part='base'] {
311
311
  margin: 0;
312
312
  color: inherit;
313
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
313
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
314
314
  }
315
315
 
316
316
  /* ── Display ─────────────────────────────────────────────────────────── */
317
317
 
318
318
  :host([variant='display-2xl']) [part='base'] {
319
+ font-family: var(
320
+ --lt-typography-fontFamilyHeading,
321
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
322
+ );
319
323
  font-size: clamp(2.5rem, 6vw, 4.5rem);
320
324
  font-weight: var(--lt-text-weight, 200);
321
325
  line-height: 1.1;
322
- letter-spacing: -0.02em;
326
+ letter-spacing: var(--lt-text-tracking, -0.02em);
323
327
  }
324
328
 
325
329
  :host([variant='display-xl']) [part='base'] {
330
+ font-family: var(
331
+ --lt-typography-fontFamilyHeading,
332
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
333
+ );
326
334
  font-size: clamp(2rem, 5vw, 3.75rem);
327
335
  font-weight: var(--lt-text-weight, 200);
328
336
  line-height: 1.1;
329
- letter-spacing: -0.02em;
337
+ letter-spacing: var(--lt-text-tracking, -0.02em);
330
338
  }
331
339
 
332
340
  :host([variant='display-lg']) [part='base'] {
341
+ font-family: var(
342
+ --lt-typography-fontFamilyHeading,
343
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
344
+ );
333
345
  font-size: clamp(2rem, 4vw, 3rem);
334
346
  font-weight: var(--lt-text-weight, 200);
335
347
  line-height: 1.15;
336
- letter-spacing: -0.01em;
348
+ letter-spacing: var(--lt-text-tracking, -0.01em);
337
349
  }
338
350
 
339
351
  /* ── Headings ─────────────────────────────────────────────────────────── */
340
352
 
341
353
  :host([variant='h1']) [part='base'] {
354
+ font-family: var(
355
+ --lt-typography-fontFamilyHeading,
356
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
357
+ );
342
358
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
343
359
  font-weight: var(--lt-text-weight, 600);
344
360
  line-height: 1.2;
345
- letter-spacing: -0.02em;
361
+ letter-spacing: var(--lt-text-tracking, -0.02em);
346
362
  }
347
363
 
348
364
  :host([variant='h2']) [part='base'] {
365
+ font-family: var(
366
+ --lt-typography-fontFamilyHeading,
367
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
368
+ );
349
369
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
350
370
  font-weight: var(--lt-text-weight, 600);
351
371
  line-height: 1.25;
352
- letter-spacing: -0.01em;
372
+ letter-spacing: var(--lt-text-tracking, -0.01em);
353
373
  }
354
374
 
355
375
  :host([variant='h3']) [part='base'] {
376
+ font-family: var(
377
+ --lt-typography-fontFamilyHeading,
378
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
379
+ );
356
380
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
357
381
  font-weight: var(--lt-text-weight, 600);
358
382
  line-height: 1.3;
359
383
  }
360
384
 
361
385
  :host([variant='h4']) [part='base'] {
386
+ font-family: var(
387
+ --lt-typography-fontFamilyHeading,
388
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
389
+ );
362
390
  font-size: 1.25rem;
363
391
  font-weight: var(--lt-text-weight, 600);
364
392
  line-height: 1.35;
365
393
  }
366
394
 
367
395
  :host([variant='h5']) [part='base'] {
396
+ font-family: var(
397
+ --lt-typography-fontFamilyHeading,
398
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
399
+ );
368
400
  font-size: 1.125rem;
369
401
  font-weight: var(--lt-text-weight, 600);
370
402
  line-height: 1.4;
371
403
  }
372
404
 
373
405
  :host([variant='h6']) [part='base'] {
406
+ font-family: var(
407
+ --lt-typography-fontFamilyHeading,
408
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
409
+ );
374
410
  font-size: 1rem;
375
411
  font-weight: var(--lt-text-weight, 600);
376
412
  line-height: 1.4;
@@ -409,7 +445,7 @@ var textStyles = css3`
409
445
  font-size: 0.6875rem;
410
446
  font-weight: var(--lt-text-weight, 600);
411
447
  line-height: 1.2;
412
- letter-spacing: 0.08em;
448
+ letter-spacing: var(--lt-text-tracking, 0.08em);
413
449
  text-transform: uppercase;
414
450
  }
415
451
 
package/dist/components/snackbar/index.js CHANGED
@@ -69,7 +69,7 @@ var snackbarStyles = css`
69
69
  align-items: center;
70
70
  color: var(--lt-text-inverse);
71
71
  display: flex;
72
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
72
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
73
73
  font-size: 0.875rem;
74
74
  gap: var(--lt-spacing-2);
75
75
  line-height: 1.4;
@@ -163,7 +163,7 @@ import { css as css2 } from "lit";
163
163
  var surfaceStyles = css2`
164
164
  :host {
165
165
  display: block;
166
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
166
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
167
167
  }
168
168
 
169
169
  .surface {
@@ -251,6 +251,8 @@ var Snackbar = class extends ThemeableElement {
251
251
  this.closable = true;
252
252
  this.actionLabel = "";
253
253
  this.icon = "";
254
+ this.elevation = "5";
255
+ this.appearance = "filled";
254
256
  }
255
257
  /** Shows the snackbar and starts the auto-dismiss timer. */
256
258
  show() {
@@ -303,7 +305,7 @@ var Snackbar = class extends ThemeableElement {
303
305
  render() {
304
306
  const iconName = this._resolvedIcon;
305
307
  return html2`
306
- <lt-surface elevation="5" background=${Snackbar._bgMap[this.variant]}>
308
+ <lt-surface elevation=${this.elevation} appearance=${this.appearance} background=${Snackbar._bgMap[this.variant]}>
307
309
  <div class="inner" role="status" aria-live="polite" part="base">
308
310
  ${iconName ? html2`<lt-icon class="variant-icon" name=${iconName} part="icon"></lt-icon>` : ""}
309
311
  <span class="message" part="message">
@@ -350,6 +352,12 @@ __decorateClass([
350
352
  __decorateClass([
351
353
  property3({ reflect: true })
352
354
  ], Snackbar.prototype, "icon", 2);
355
+ __decorateClass([
356
+ property3({ reflect: true })
357
+ ], Snackbar.prototype, "elevation", 2);
358
+ __decorateClass([
359
+ property3({ reflect: true })
360
+ ], Snackbar.prototype, "appearance", 2);
353
361
  Snackbar = __decorateClass([
354
362
  customElement2("lt-snackbar")
355
363
  ], Snackbar);
package/dist/components/snackbar/snackbar.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ThemeableElement } from '../../base';
2
2
  import type { SnackbarVariant } from './snackbar.types';
3
+ import type { SurfaceElevation, SurfaceAppearance } from '../surface/surface.types';
3
4
  import '@latty-ds/icons';
4
5
  import '../surface/surface';
5
6
  /**
@@ -45,6 +46,16 @@ export declare class Snackbar extends ThemeableElement {
45
46
  * set to `"none"` to suppress, or pass any icon name to override.
46
47
  */
47
48
  icon: string;
49
+ /**
50
+ * Elevation level of the internal surface, matching `lt-surface`'s scale.
51
+ * @default '5'
52
+ */
53
+ elevation: SurfaceElevation;
54
+ /**
55
+ * Visual appearance of the internal surface, matching `lt-surface`'s vocabulary.
56
+ * @default 'filled'
57
+ */
58
+ appearance: SurfaceAppearance;
48
59
  private _timer?;
49
60
  /** Shows the snackbar and starts the auto-dismiss timer. */
50
61
  show(): void;
package/dist/components/surface/index.js CHANGED
@@ -43,7 +43,7 @@ import { css } from "lit";
43
43
  var surfaceStyles = css`
44
44
  :host {
45
45
  display: block;
46
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
46
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
47
47
  }
48
48
 
49
49
  .surface {
package/dist/components/switch/index.js CHANGED
@@ -42,7 +42,7 @@ import { css } from "lit";
42
42
  var switchStyles = css`
43
43
  :host {
44
44
  display: inline-block;
45
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
45
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
46
46
  }
47
47
 
48
48
  .switch-wrapper {
package/dist/components/tab/index.js CHANGED
@@ -42,7 +42,7 @@ import { css } from "lit";
42
42
  var tabStyles = css`
43
43
  :host {
44
44
  display: inline-block;
45
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
45
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
46
46
  }
47
47
 
48
48
  .tab {
package/dist/components/tab-group/index.js CHANGED
@@ -42,7 +42,7 @@ import { css } from "lit";
42
42
  var tabGroupStyles = css`
43
43
  :host {
44
44
  display: block;
45
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
45
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
46
46
  }
47
47
 
48
48
  .tab-group {
@@ -102,7 +102,7 @@ import { css as css2 } from "lit";
102
102
  var tabStyles = css2`
103
103
  :host {
104
104
  display: inline-block;
105
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
105
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
106
106
  }
107
107
 
108
108
  .tab {
package/dist/components/table/index.js CHANGED
@@ -45,7 +45,7 @@ import { css } from "lit";
45
45
  var tableStyles = css`
46
46
  :host {
47
47
  display: block;
48
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
48
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
49
49
  overflow: hidden;
50
50
  width: 100%;
51
51
  }
package/dist/components/text/index.js CHANGED
@@ -53,67 +53,103 @@ var textStyles = css`
53
53
  [part='base'] {
54
54
  margin: 0;
55
55
  color: inherit;
56
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
56
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
57
57
  }
58
58
 
59
59
  /* ── Display ─────────────────────────────────────────────────────────── */
60
60
 
61
61
  :host([variant='display-2xl']) [part='base'] {
62
+ font-family: var(
63
+ --lt-typography-fontFamilyHeading,
64
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
65
+ );
62
66
  font-size: clamp(2.5rem, 6vw, 4.5rem);
63
67
  font-weight: var(--lt-text-weight, 200);
64
68
  line-height: 1.1;
65
- letter-spacing: -0.02em;
69
+ letter-spacing: var(--lt-text-tracking, -0.02em);
66
70
  }
67
71
 
68
72
  :host([variant='display-xl']) [part='base'] {
73
+ font-family: var(
74
+ --lt-typography-fontFamilyHeading,
75
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
76
+ );
69
77
  font-size: clamp(2rem, 5vw, 3.75rem);
70
78
  font-weight: var(--lt-text-weight, 200);
71
79
  line-height: 1.1;
72
- letter-spacing: -0.02em;
80
+ letter-spacing: var(--lt-text-tracking, -0.02em);
73
81
  }
74
82
 
75
83
  :host([variant='display-lg']) [part='base'] {
84
+ font-family: var(
85
+ --lt-typography-fontFamilyHeading,
86
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
87
+ );
76
88
  font-size: clamp(2rem, 4vw, 3rem);
77
89
  font-weight: var(--lt-text-weight, 200);
78
90
  line-height: 1.15;
79
- letter-spacing: -0.01em;
91
+ letter-spacing: var(--lt-text-tracking, -0.01em);
80
92
  }
81
93
 
82
94
  /* ── Headings ─────────────────────────────────────────────────────────── */
83
95
 
84
96
  :host([variant='h1']) [part='base'] {
97
+ font-family: var(
98
+ --lt-typography-fontFamilyHeading,
99
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
100
+ );
85
101
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
86
102
  font-weight: var(--lt-text-weight, 600);
87
103
  line-height: 1.2;
88
- letter-spacing: -0.02em;
104
+ letter-spacing: var(--lt-text-tracking, -0.02em);
89
105
  }
90
106
 
91
107
  :host([variant='h2']) [part='base'] {
108
+ font-family: var(
109
+ --lt-typography-fontFamilyHeading,
110
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
111
+ );
92
112
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
93
113
  font-weight: var(--lt-text-weight, 600);
94
114
  line-height: 1.25;
95
- letter-spacing: -0.01em;
115
+ letter-spacing: var(--lt-text-tracking, -0.01em);
96
116
  }
97
117
 
98
118
  :host([variant='h3']) [part='base'] {
119
+ font-family: var(
120
+ --lt-typography-fontFamilyHeading,
121
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
122
+ );
99
123
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
100
124
  font-weight: var(--lt-text-weight, 600);
101
125
  line-height: 1.3;
102
126
  }
103
127
 
104
128
  :host([variant='h4']) [part='base'] {
129
+ font-family: var(
130
+ --lt-typography-fontFamilyHeading,
131
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
132
+ );
105
133
  font-size: 1.25rem;
106
134
  font-weight: var(--lt-text-weight, 600);
107
135
  line-height: 1.35;
108
136
  }
109
137
 
110
138
  :host([variant='h5']) [part='base'] {
139
+ font-family: var(
140
+ --lt-typography-fontFamilyHeading,
141
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
142
+ );
111
143
  font-size: 1.125rem;
112
144
  font-weight: var(--lt-text-weight, 600);
113
145
  line-height: 1.4;
114
146
  }
115
147
 
116
148
  :host([variant='h6']) [part='base'] {
149
+ font-family: var(
150
+ --lt-typography-fontFamilyHeading,
151
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
152
+ );
117
153
  font-size: 1rem;
118
154
  font-weight: var(--lt-text-weight, 600);
119
155
  line-height: 1.4;
@@ -152,7 +188,7 @@ var textStyles = css`
152
188
  font-size: 0.6875rem;
153
189
  font-weight: var(--lt-text-weight, 600);
154
190
  line-height: 1.2;
155
- letter-spacing: 0.08em;
191
+ letter-spacing: var(--lt-text-tracking, 0.08em);
156
192
  text-transform: uppercase;
157
193
  }
158
194
 
package/dist/components/text/text.d.ts CHANGED
@@ -13,6 +13,7 @@ import type { TextVariant, TextTag } from './text.types';
13
13
  *
14
14
  * @element lt-text
15
15
  * @cssprop [--lt-text-weight] - Overrides the default font-weight for the variant.
16
+ * @cssprop [--lt-text-tracking] - Overrides the default letter-spacing for the variant.
16
17
  *
17
18
  * @example
18
19
  * ```html
package/dist/components/textfield/index.js CHANGED
@@ -43,7 +43,7 @@ import { css } from "lit";
43
43
  var textfieldStyles = css`
44
44
  :host {
45
45
  display: inline-block;
46
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
46
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
47
47
  width: 100%;
48
48
  }
49
49
 
@@ -307,67 +307,103 @@ var textStyles = css2`
307
307
  [part='base'] {
308
308
  margin: 0;
309
309
  color: inherit;
310
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
310
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
311
311
  }
312
312
 
313
313
  /* ── Display ─────────────────────────────────────────────────────────── */
314
314
 
315
315
  :host([variant='display-2xl']) [part='base'] {
316
+ font-family: var(
317
+ --lt-typography-fontFamilyHeading,
318
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
319
+ );
316
320
  font-size: clamp(2.5rem, 6vw, 4.5rem);
317
321
  font-weight: var(--lt-text-weight, 200);
318
322
  line-height: 1.1;
319
- letter-spacing: -0.02em;
323
+ letter-spacing: var(--lt-text-tracking, -0.02em);
320
324
  }
321
325
 
322
326
  :host([variant='display-xl']) [part='base'] {
327
+ font-family: var(
328
+ --lt-typography-fontFamilyHeading,
329
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
330
+ );
323
331
  font-size: clamp(2rem, 5vw, 3.75rem);
324
332
  font-weight: var(--lt-text-weight, 200);
325
333
  line-height: 1.1;
326
- letter-spacing: -0.02em;
334
+ letter-spacing: var(--lt-text-tracking, -0.02em);
327
335
  }
328
336
 
329
337
  :host([variant='display-lg']) [part='base'] {
338
+ font-family: var(
339
+ --lt-typography-fontFamilyHeading,
340
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
341
+ );
330
342
  font-size: clamp(2rem, 4vw, 3rem);
331
343
  font-weight: var(--lt-text-weight, 200);
332
344
  line-height: 1.15;
333
- letter-spacing: -0.01em;
345
+ letter-spacing: var(--lt-text-tracking, -0.01em);
334
346
  }
335
347
 
336
348
  /* ── Headings ─────────────────────────────────────────────────────────── */
337
349
 
338
350
  :host([variant='h1']) [part='base'] {
351
+ font-family: var(
352
+ --lt-typography-fontFamilyHeading,
353
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
354
+ );
339
355
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
340
356
  font-weight: var(--lt-text-weight, 600);
341
357
  line-height: 1.2;
342
- letter-spacing: -0.02em;
358
+ letter-spacing: var(--lt-text-tracking, -0.02em);
343
359
  }
344
360
 
345
361
  :host([variant='h2']) [part='base'] {
362
+ font-family: var(
363
+ --lt-typography-fontFamilyHeading,
364
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
365
+ );
346
366
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
347
367
  font-weight: var(--lt-text-weight, 600);
348
368
  line-height: 1.25;
349
- letter-spacing: -0.01em;
369
+ letter-spacing: var(--lt-text-tracking, -0.01em);
350
370
  }
351
371
 
352
372
  :host([variant='h3']) [part='base'] {
373
+ font-family: var(
374
+ --lt-typography-fontFamilyHeading,
375
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
376
+ );
353
377
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
354
378
  font-weight: var(--lt-text-weight, 600);
355
379
  line-height: 1.3;
356
380
  }
357
381
 
358
382
  :host([variant='h4']) [part='base'] {
383
+ font-family: var(
384
+ --lt-typography-fontFamilyHeading,
385
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
386
+ );
359
387
  font-size: 1.25rem;
360
388
  font-weight: var(--lt-text-weight, 600);
361
389
  line-height: 1.35;
362
390
  }
363
391
 
364
392
  :host([variant='h5']) [part='base'] {
393
+ font-family: var(
394
+ --lt-typography-fontFamilyHeading,
395
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
396
+ );
365
397
  font-size: 1.125rem;
366
398
  font-weight: var(--lt-text-weight, 600);
367
399
  line-height: 1.4;
368
400
  }
369
401
 
370
402
  :host([variant='h6']) [part='base'] {
403
+ font-family: var(
404
+ --lt-typography-fontFamilyHeading,
405
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
406
+ );
371
407
  font-size: 1rem;
372
408
  font-weight: var(--lt-text-weight, 600);
373
409
  line-height: 1.4;
@@ -406,7 +442,7 @@ var textStyles = css2`
406
442
  font-size: 0.6875rem;
407
443
  font-weight: var(--lt-text-weight, 600);
408
444
  line-height: 1.2;
409
- letter-spacing: 0.08em;
445
+ letter-spacing: var(--lt-text-tracking, 0.08em);
410
446
  text-transform: uppercase;
411
447
  }
412
448
 
package/dist/components/tooltip/index.js CHANGED
@@ -170,67 +170,103 @@ var textStyles = css2`
170
170
  [part='base'] {
171
171
  margin: 0;
172
172
  color: inherit;
173
- font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
173
+ font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
174
174
  }
175
175
 
176
176
  /* ── Display ─────────────────────────────────────────────────────────── */
177
177
 
178
178
  :host([variant='display-2xl']) [part='base'] {
179
+ font-family: var(
180
+ --lt-typography-fontFamilyHeading,
181
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
182
+ );
179
183
  font-size: clamp(2.5rem, 6vw, 4.5rem);
180
184
  font-weight: var(--lt-text-weight, 200);
181
185
  line-height: 1.1;
182
- letter-spacing: -0.02em;
186
+ letter-spacing: var(--lt-text-tracking, -0.02em);
183
187
  }
184
188
 
185
189
  :host([variant='display-xl']) [part='base'] {
190
+ font-family: var(
191
+ --lt-typography-fontFamilyHeading,
192
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
193
+ );
186
194
  font-size: clamp(2rem, 5vw, 3.75rem);
187
195
  font-weight: var(--lt-text-weight, 200);
188
196
  line-height: 1.1;
189
- letter-spacing: -0.02em;
197
+ letter-spacing: var(--lt-text-tracking, -0.02em);
190
198
  }
191
199
 
192
200
  :host([variant='display-lg']) [part='base'] {
201
+ font-family: var(
202
+ --lt-typography-fontFamilyHeading,
203
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
204
+ );
193
205
  font-size: clamp(2rem, 4vw, 3rem);
194
206
  font-weight: var(--lt-text-weight, 200);
195
207
  line-height: 1.15;
196
- letter-spacing: -0.01em;
208
+ letter-spacing: var(--lt-text-tracking, -0.01em);
197
209
  }
198
210
 
199
211
  /* ── Headings ─────────────────────────────────────────────────────────── */
200
212
 
201
213
  :host([variant='h1']) [part='base'] {
214
+ font-family: var(
215
+ --lt-typography-fontFamilyHeading,
216
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
217
+ );
202
218
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
203
219
  font-weight: var(--lt-text-weight, 600);
204
220
  line-height: 1.2;
205
- letter-spacing: -0.02em;
221
+ letter-spacing: var(--lt-text-tracking, -0.02em);
206
222
  }
207
223
 
208
224
  :host([variant='h2']) [part='base'] {
225
+ font-family: var(
226
+ --lt-typography-fontFamilyHeading,
227
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
228
+ );
209
229
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
210
230
  font-weight: var(--lt-text-weight, 600);
211
231
  line-height: 1.25;
212
- letter-spacing: -0.01em;
232
+ letter-spacing: var(--lt-text-tracking, -0.01em);
213
233
  }
214
234
 
215
235
  :host([variant='h3']) [part='base'] {
236
+ font-family: var(
237
+ --lt-typography-fontFamilyHeading,
238
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
239
+ );
216
240
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
217
241
  font-weight: var(--lt-text-weight, 600);
218
242
  line-height: 1.3;
219
243
  }
220
244
 
221
245
  :host([variant='h4']) [part='base'] {
246
+ font-family: var(
247
+ --lt-typography-fontFamilyHeading,
248
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
249
+ );
222
250
  font-size: 1.25rem;
223
251
  font-weight: var(--lt-text-weight, 600);
224
252
  line-height: 1.35;
225
253
  }
226
254
 
227
255
  :host([variant='h5']) [part='base'] {
256
+ font-family: var(
257
+ --lt-typography-fontFamilyHeading,
258
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
259
+ );
228
260
  font-size: 1.125rem;
229
261
  font-weight: var(--lt-text-weight, 600);
230
262
  line-height: 1.4;
231
263
  }
232
264
 
233
265
  :host([variant='h6']) [part='base'] {
266
+ font-family: var(
267
+ --lt-typography-fontFamilyHeading,
268
+ var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
269
+ );
234
270
  font-size: 1rem;
235
271
  font-weight: var(--lt-text-weight, 600);
236
272
  line-height: 1.4;
@@ -269,7 +305,7 @@ var textStyles = css2`
269
305
  font-size: 0.6875rem;
270
306
  font-weight: var(--lt-text-weight, 600);
271
307
  line-height: 1.2;
272
- letter-spacing: 0.08em;
308
+ letter-spacing: var(--lt-text-tracking, 0.08em);
273
309
  text-transform: uppercase;
274
310
  }
275
311