@teseor/css 2.3.0 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +1 -1
  3. package/package.json +1 -1
  4. package/src/components/data-display/tag/api.json +2 -2
  5. package/src/components/data-display/tag/index.scss +2 -2
  6. package/src/components/feedback/skeleton/docs.html +1 -1
  7. package/src/components/overlays/dialog/docs.html +1 -1
  8. package/src/components/overlays/drawer/docs.html +5 -5
  9. package/src/components/overlays/modal/docs.html +1 -1
  10. package/src/layout/sidebar-nav/docs.html +2 -2
  11. package/src/utilities/scroll-animation/docs.html +4 -4
  12. package/src/utilities/scroll-snap/docs.html +30 -30
  13. package/src/utilities/visually-hidden/docs.html +1 -1
package/src/components/overlays/drawer/docs.html CHANGED
@@ -4,7 +4,7 @@ title: Drawer
4
4
 
5
5
  <!-- @default_end -->
6
6
  <!-- Slides in from the end (right in LTR) -->
7
- <div class="demo-container demo-container--overflow" style="--demo-h: 300px">
7
+ <div class="demo-container demo-container--overflow" style="--demo-h: 304px">
8
8
  <div class="ui-drawer-overlay ui-absolute"></div>
9
9
  <div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
10
10
  <div class="ui-drawer__header">
@@ -57,28 +57,28 @@ title: Drawer
57
57
  </div>
58
58
 
59
59
  <!-- @sizes | column -->
60
- <div class="demo-container demo-container--overflow" style="--demo-h: 150px">
60
+ <div class="demo-container demo-container--overflow" style="--demo-h: 152px">
61
61
  <div class="ui-drawer ui-drawer--end ui-drawer--sm ui-absolute" data-state="open">
62
62
  <div class="ui-drawer__body">
63
63
  <p>{{ t('small_drawer', 'Small drawer') }}</p>
64
64
  </div>
65
65
  </div>
66
66
  </div>
67
- <div class="demo-container demo-container--overflow" style="--demo-h: 150px">
67
+ <div class="demo-container demo-container--overflow" style="--demo-h: 152px">
68
68
  <div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
69
69
  <div class="ui-drawer__body">
70
70
  <p>{{ t('default_drawer', 'Default drawer') }}</p>
71
71
  </div>
72
72
  </div>
73
73
  </div>
74
- <div class="demo-container demo-container--overflow" style="--demo-h: 150px">
74
+ <div class="demo-container demo-container--overflow" style="--demo-h: 152px">
75
75
  <div class="ui-drawer ui-drawer--end ui-drawer--lg ui-absolute" data-state="open">
76
76
  <div class="ui-drawer__body">
77
77
  <p>{{ t('large_drawer', 'Large drawer') }}</p>
78
78
  </div>
79
79
  </div>
80
80
  </div>
81
- <div class="demo-container demo-container--overflow" style="--demo-h: 150px">
81
+ <div class="demo-container demo-container--overflow" style="--demo-h: 152px">
82
82
  <div class="ui-drawer ui-drawer--end ui-drawer--full ui-absolute" data-state="open">
83
83
  <div class="ui-drawer__body">
84
84
  <p>{{ t('full_size_drawer', 'Full-size drawer') }}</p>
package/src/components/overlays/modal/docs.html CHANGED
@@ -52,7 +52,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
52
52
  <!-- @with_scrollable_content -->
53
53
  <div class="demo-area">
54
54
  <div class="ui-modal ui-modal--visible ui-absolute">
55
- <div class="ui-modal__content" style="max-height: 150px;">
55
+ <div class="ui-modal__content" style="max-height: 152px;">
56
56
  <div class="ui-modal__body">
57
57
  <p>{{ t('line_1', 'Line 1') }}</p>
58
58
  <p>{{ t('line_2', 'Line 2') }}</p>
package/src/layout/sidebar-nav/docs.html CHANGED
@@ -55,7 +55,7 @@ description: Navigation component for sidebars with support for groups, nested i
55
55
 
56
56
  <!-- @with_icons -->
57
57
  <!-- Navigation items with icons for visual clarity. -->
58
- <nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 300px">
58
+ <nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 304px">
59
59
  <div class="ui-sidebar-nav__content">
60
60
  <ul class="ui-sidebar-nav__group-items">
61
61
  <li>
@@ -209,7 +209,7 @@ description: Navigation component for sidebars with support for groups, nested i
209
209
 
210
210
  <!-- @disabled_items -->
211
211
  <!-- Non-interactive navigation items. -->
212
- <nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 180px">
212
+ <nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 184px">
213
213
  <div class="ui-sidebar-nav__content">
214
214
  <ul class="ui-sidebar-nav__group-items">
215
215
  <li>
package/src/utilities/scroll-animation/docs.html CHANGED
@@ -14,16 +14,16 @@ description: Scroll-driven animation utilities for progress indicators and viewp
14
14
 
15
15
  <!-- @view_fade -->
16
16
  <!-- Elements fade in as they enter the viewport. -->
17
- <div class="ui-view-fade ui-card ui-p-2">{{ t('i_fade_in_on_scroll', 'I fade in on scroll') }}</div>
17
+ <div class="ui-view-fade ui-card ui-card--sm">{{ t('i_fade_in_on_scroll', 'I fade in on scroll') }}</div>
18
18
 
19
19
  <!-- @view_slide_up -->
20
20
  <!-- Elements slide up and fade in on viewport entry. -->
21
- <div class="ui-view-slide-up ui-card ui-p-2">{{ t('i_slide_up_into_view', 'I slide up into view') }}</div>
21
+ <div class="ui-view-slide-up ui-card ui-card--sm">{{ t('i_slide_up_into_view', 'I slide up into view') }}</div>
22
22
 
23
23
  <!-- @view_slide_start -->
24
24
  <!-- Elements slide in from the start edge (left in LTR) on viewport entry. -->
25
- <div class="ui-view-slide-start ui-card ui-p-2">{{ t('i_slide_from_the_start', 'I slide from the start') }}</div>
25
+ <div class="ui-view-slide-start ui-card ui-card--sm">{{ t('i_slide_from_the_start', 'I slide from the start') }}</div>
26
26
 
27
27
  <!-- @view_scale -->
28
28
  <!-- Elements scale up and fade in on viewport entry. -->
29
- <div class="ui-view-scale ui-card ui-p-2">{{ t('i_scale_into_view', 'I scale into view') }}</div>
29
+ <div class="ui-view-scale ui-card ui-card--sm">{{ t('i_scale_into_view', 'I scale into view') }}</div>
package/src/utilities/scroll-snap/docs.html CHANGED
@@ -6,72 +6,72 @@ description: Scroll-snap utilities for carousels, horizontal lists, and snap-to-
6
6
  <!-- @horizontal_snap -->
7
7
  <!-- Snap children to start position on horizontal scroll. -->
8
8
  <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
9
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_1', 'Item 1') }}</div>
10
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_2', 'Item 2') }}</div>
11
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_3', 'Item 3') }}</div>
12
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_4', 'Item 4') }}</div>
9
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_1', 'Item 1') }}</div>
10
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_2', 'Item 2') }}</div>
11
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_3', 'Item 3') }}</div>
12
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_4', 'Item 4') }}</div>
13
13
  </div>
14
14
 
15
15
  <!-- @center_snap -->
16
16
  <!-- Snap children to center position. -->
17
17
  <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
18
- <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_1', 'Center 1') }}</div>
19
- <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_2', 'Center 2') }}</div>
20
- <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_3', 'Center 3') }}</div>
18
+ <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_1', 'Center 1') }}</div>
19
+ <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_2', 'Center 2') }}</div>
20
+ <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_3', 'Center 3') }}</div>
21
21
  </div>
22
22
 
23
23
  <!-- @vertical_snap -->
24
24
  <!-- Snap children on vertical scroll. -->
25
25
  <div class="ui-snap-y" style="max-block-size: 8rem">
26
- <div class="ui-snap-start ui-card ui-p-2">{{ t('section_1', 'Section 1') }}</div>
27
- <div class="ui-snap-start ui-card ui-p-2">{{ t('section_2', 'Section 2') }}</div>
28
- <div class="ui-snap-start ui-card ui-p-2">{{ t('section_3', 'Section 3') }}</div>
26
+ <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_1', 'Section 1') }}</div>
27
+ <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_2', 'Section 2') }}</div>
28
+ <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_3', 'Section 3') }}</div>
29
29
  </div>
30
30
 
31
31
  <!-- @proximity_snap -->
32
32
  <!-- Softer snap that only engages when close to a snap point. -->
33
33
  <div class="ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2 demo-narrow">
34
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_1', 'Proximity 1') }}</div>
35
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_2', 'Proximity 2') }}</div>
36
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_3', 'Proximity 3') }}</div>
34
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_1', 'Proximity 1') }}</div>
35
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_2', 'Proximity 2') }}</div>
36
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_3', 'Proximity 3') }}</div>
37
37
  </div>
38
38
  <div class="ui-snap-y-proximity" style="max-block-size: 8rem">
39
- <div class="ui-snap-start ui-card ui-p-2">{{ t('section_1', 'Section 1') }}</div>
40
- <div class="ui-snap-start ui-card ui-p-2">{{ t('section_2', 'Section 2') }}</div>
41
- <div class="ui-snap-start ui-card ui-p-2">{{ t('section_3', 'Section 3') }}</div>
39
+ <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_1', 'Section 1') }}</div>
40
+ <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_2', 'Section 2') }}</div>
41
+ <div class="ui-snap-start ui-card ui-card--sm">{{ t('section_3', 'Section 3') }}</div>
42
42
  </div>
43
43
 
44
44
  <!-- @end_alignment_and_stop -->
45
45
  <!-- Snap children to end position or force stop at every snap point. -->
46
46
  <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
47
- <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_1', 'End 1') }}</div>
48
- <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_2', 'End 2') }}</div>
49
- <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_3', 'End 3') }}</div>
47
+ <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_1', 'End 1') }}</div>
48
+ <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_2', 'End 2') }}</div>
49
+ <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_3', 'End 3') }}</div>
50
50
  </div>
51
51
  <div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
52
- <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_1', 'Always 1') }}</div>
53
- <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_2', 'Always 2') }}</div>
54
- <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_3', 'Always 3') }}</div>
52
+ <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_1', 'Always 1') }}</div>
53
+ <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_2', 'Always 2') }}</div>
54
+ <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_3', 'Always 3') }}</div>
55
55
  </div>
56
56
 
57
57
  <!-- @disable_snap -->
58
58
  <!-- Remove snap behavior from a container. -->
59
59
  <div class="ui-snap-none ui-flex ui-gap-2 ui-p-2 demo-narrow ui-overflow-x-auto">
60
- <div class="ui-card ui-p-2 demo-snap-item">{{ t('no_snap_1', 'No snap 1') }}</div>
61
- <div class="ui-card ui-p-2 demo-snap-item">{{ t('no_snap_2', 'No snap 2') }}</div>
60
+ <div class="ui-card ui-card--sm demo-snap-item">{{ t('no_snap_1', 'No snap 1') }}</div>
61
+ <div class="ui-card ui-card--sm demo-snap-item">{{ t('no_snap_2', 'No snap 2') }}</div>
62
62
  </div>
63
63
 
64
64
  <!-- @scroll_padding -->
65
65
  <!-- Offset snap position for fixed headers or insets. -->
66
66
  <div class="ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2 demo-narrow">
67
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_1', 'p-1') }}</div>
68
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_1', 'p-1') }}</div>
67
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_1', 'p-1') }}</div>
68
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_1', 'p-1') }}</div>
69
69
  </div>
70
70
  <div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2 demo-narrow">
71
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_2', 'p-2') }}</div>
72
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_2', 'p-2') }}</div>
71
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_2', 'p-2') }}</div>
72
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_2', 'p-2') }}</div>
73
73
  </div>
74
74
  <div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2 demo-narrow">
75
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_4', 'p-4') }}</div>
76
- <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_4', 'p-4') }}</div>
75
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_4', 'p-4') }}</div>
76
+ <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_4', 'p-4') }}</div>
77
77
  </div>
package/src/utilities/visually-hidden/docs.html CHANGED
@@ -6,7 +6,7 @@ description: Hides content visually while keeping it accessible to screen reader
6
6
 
7
7
  <!-- @default -->
8
8
  <!-- Content is hidden visually but announced by screen readers -->
9
- <button>
9
+ <button class="ui-button">
10
10
  {{ t('submit', 'Submit') }}
11
11
  <span class="ui-visually-hidden"> {{ t('form_to_contact_support', 'form to contact support') }}</span>
12
12
  </button>