@frame-ui-ng/components 0.4.2-beta.0 → 0.5.0-beta.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 (88) hide show
  1. package/accordion/src/styles/_vars.css +9 -8
  2. package/accordion/src/styles/accordion.css +3 -2
  3. package/alert/src/styles/_vars.css +10 -10
  4. package/alert/src/styles/alert.css +77 -77
  5. package/avatar/src/styles/_vars.css +34 -34
  6. package/avatar/src/styles/avatar.css +209 -209
  7. package/badge/src/styles/_vars.css +9 -9
  8. package/breadcrumb/src/styles/_vars.css +2 -2
  9. package/button/src/styles/_vars.css +5 -5
  10. package/button/src/styles/button.css +26 -51
  11. package/button-group/src/styles/button-group.css +11 -4
  12. package/calendar/src/styles/_vars.css +6 -6
  13. package/card/src/styles/_vars.css +10 -2
  14. package/card/src/styles/card.css +132 -142
  15. package/carousel/src/styles/_vars.css +7 -7
  16. package/checkbox/src/styles/_vars.css +3 -3
  17. package/checkbox/src/styles/checkbox.css +95 -95
  18. package/collapsible/src/styles/_vars.css +13 -13
  19. package/combobox/src/styles/_vars.css +20 -20
  20. package/command/src/styles/_vars.css +18 -17
  21. package/command/src/styles/command.css +1 -0
  22. package/date-picker/src/styles/_vars.css +6 -6
  23. package/drag-drop/src/styles/_vars.css +8 -8
  24. package/dropdown-menu/src/styles/_vars.css +8 -8
  25. package/empty/src/styles/_vars.css +23 -23
  26. package/fesm2022/frame-ui-ng-components-button.mjs +5 -8
  27. package/fesm2022/frame-ui-ng-components-button.mjs.map +1 -1
  28. package/fesm2022/frame-ui-ng-components-carousel.mjs +4 -4
  29. package/fesm2022/frame-ui-ng-components-carousel.mjs.map +1 -1
  30. package/fesm2022/frame-ui-ng-components-confirm-modal.mjs +1 -1
  31. package/fesm2022/frame-ui-ng-components-confirm-modal.mjs.map +1 -1
  32. package/fesm2022/frame-ui-ng-components-confirm-popover.mjs +1 -1
  33. package/fesm2022/frame-ui-ng-components-confirm-popover.mjs.map +1 -1
  34. package/fesm2022/frame-ui-ng-components-modal.mjs +1 -1
  35. package/fesm2022/frame-ui-ng-components-modal.mjs.map +1 -1
  36. package/fesm2022/frame-ui-ng-components-sheet.mjs +1 -1
  37. package/fesm2022/frame-ui-ng-components-sheet.mjs.map +1 -1
  38. package/fesm2022/frame-ui-ng-components.mjs +12 -15
  39. package/fesm2022/frame-ui-ng-components.mjs.map +1 -1
  40. package/field/src/styles/_vars.css +20 -20
  41. package/hover-card/src/styles/_vars.css +21 -21
  42. package/input/src/styles/_vars.css +15 -15
  43. package/input/src/styles/input.css +0 -5
  44. package/input-otp/src/styles/_vars.css +3 -3
  45. package/input-otp/src/styles/input-otp.css +116 -116
  46. package/item/src/styles/_vars.css +9 -9
  47. package/menubar/src/styles/_vars.css +7 -7
  48. package/modal/src/styles/_vars.css +12 -12
  49. package/modal/src/styles/modal.css +1 -1
  50. package/navigation-menu/src/styles/_vars.css +9 -9
  51. package/package.json +2 -2
  52. package/pagination/src/styles/_vars.css +6 -6
  53. package/pagination/src/styles/pagination.css +14 -4
  54. package/popover/src/styles/_vars.css +24 -24
  55. package/progress/src/styles/_vars.css +2 -2
  56. package/progress/src/styles/progress.css +64 -64
  57. package/radio-group/src/styles/_vars.css +5 -5
  58. package/radio-group/src/styles/radio-group.css +2 -2
  59. package/resizable/src/styles/_vars.css +2 -2
  60. package/resizable/src/styles/resizable.css +130 -130
  61. package/select/src/styles/_vars.css +8 -8
  62. package/separator/src/styles/_vars.css +2 -2
  63. package/separator/src/styles/separator.css +25 -25
  64. package/sheet/src/styles/_vars.css +12 -12
  65. package/sheet/src/styles/sheet.css +1 -1
  66. package/sidebar/src/styles/_vars.css +24 -24
  67. package/sidebar/src/styles/sidebar.css +5 -5
  68. package/skeleton/src/styles/_vars.css +8 -8
  69. package/slider/src/styles/_vars.css +6 -6
  70. package/slider/src/styles/slider.css +147 -147
  71. package/spinner/src/styles/_vars.css +8 -9
  72. package/src/styles/blueprint.css +15 -65
  73. package/styles/blueprint.css +15 -65
  74. package/switch/src/styles/_vars.css +4 -4
  75. package/table/src/styles/_vars.css +26 -25
  76. package/table/src/styles/table.css +245 -245
  77. package/tabs/src/styles/_vars.css +19 -17
  78. package/tabs/src/styles/tabs.css +166 -164
  79. package/textarea/src/styles/_vars.css +4 -4
  80. package/toast/src/styles/_vars.css +20 -20
  81. package/toast/src/styles/toast.css +2 -2
  82. package/toggle/src/styles/_vars.css +14 -14
  83. package/toggle/src/styles/toggle.css +110 -110
  84. package/tooltip/src/styles/_vars.css +9 -9
  85. package/tooltip/src/styles/tooltip.css +18 -9
  86. package/types/frame-ui-ng-components-button.d.ts +5 -8
  87. package/types/frame-ui-ng-components-carousel.d.ts +2 -2
  88. package/types/frame-ui-ng-components.d.ts +15 -18
package/accordion/src/styles/_vars.css CHANGED
@@ -1,18 +1,19 @@
1
- :root {
1
+ :where(:root) {
2
+ --frame-accordion-radius: var(--frame-radius-md);
2
3
  --frame-accordion-item-border: var(--frame-border);
3
- --frame-accordion-item-radius: 0;
4
+ --frame-accordion-item-radius: 0px;
4
5
  --frame-accordion-item-padding-x: 0;
5
- --frame-accordion-trigger-min-height: 3.25rem;
6
- --frame-accordion-trigger-padding-y: 1rem;
7
- --frame-accordion-trigger-padding-x: 1rem;
8
- --frame-accordion-trigger-gap: 1rem;
6
+ --frame-accordion-trigger-min-height: calc(var(--frame-density-control-height-lg) + var(--frame-density-gap-lg));
7
+ --frame-accordion-trigger-padding-y: var(--frame-density-panel-padding-md);
8
+ --frame-accordion-trigger-padding-x: var(--frame-density-panel-padding-md);
9
+ --frame-accordion-trigger-gap: var(--frame-density-gap-xl);
9
10
  --frame-accordion-trigger-color: var(--frame-foreground);
10
11
  --frame-accordion-trigger-font-size: 0.9375rem;
11
12
  --frame-accordion-trigger-font-weight: 500;
12
13
  --frame-accordion-trigger-hover-color: var(--frame-foreground);
13
14
  --frame-accordion-trigger-disabled-opacity: 0.55;
14
- --frame-accordion-content-padding-bottom: 1rem;
15
- --frame-accordion-content-padding-inline: 1rem;
15
+ --frame-accordion-content-padding-bottom: var(--frame-density-panel-padding-md);
16
+ --frame-accordion-content-padding-inline: var(--frame-density-panel-padding-md);
16
17
  --frame-accordion-content-color: var(--frame-muted-foreground);
17
18
  --frame-accordion-content-font-size: 0.875rem;
18
19
  --frame-accordion-content-line-height: 1.6;
package/accordion/src/styles/accordion.css CHANGED
@@ -4,18 +4,19 @@
4
4
  display: grid;
5
5
  border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
6
6
  background: var(--frame-surface);
7
+ border-radius: var(--frame-accordion-radius, var(--frame-radius-md));
8
+ overflow: hidden;
7
9
  }
8
10
 
9
11
  [frAccordion][data-border='true'] {
10
12
  border-color: var(--frame-border);
11
- border-radius: 0;
12
13
  padding-inline: 0;
13
14
  }
14
15
 
15
16
  [frAccordionItem] {
16
17
  position: relative;
17
18
  border-bottom: 1px solid var(--frame-accordion-item-border, var(--frame-border));
18
- border-radius: var(--frame-accordion-item-radius, 0);
19
+ border-radius: var(--frame-accordion-item-radius, 0px);
19
20
  padding-inline: 0;
20
21
  }
21
22
 
package/alert/src/styles/_vars.css CHANGED
@@ -1,24 +1,24 @@
1
- :root {
1
+ :where(:root) {
2
2
  --frame-alert-root-bg: var(--frame-surface);
3
3
  --frame-alert-root-border: var(--frame-border);
4
4
  --frame-alert-root-color: var(--frame-surface-foreground);
5
5
  --frame-alert-root-radius: var(--frame-radius-md);
6
- --frame-alert-root-padding-y: 1rem;
7
- --frame-alert-root-padding-x: 1rem;
8
- --frame-alert-root-gap: 0.25rem;
6
+ --frame-alert-root-padding-y: var(--frame-density-panel-padding-md);
7
+ --frame-alert-root-padding-x: var(--frame-density-panel-padding-md);
8
+ --frame-alert-root-gap: var(--frame-density-gap-sm);
9
9
  --frame-alert-root-icon-size: 1rem;
10
10
  --frame-alert-root-shadow: none;
11
11
  --frame-alert-root-destructive-bg: color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface));
12
12
  --frame-alert-root-destructive-border: color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border));
13
13
  --frame-alert-root-destructive-color: var(--frame-surface-foreground);
14
- --frame-alert-root-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
15
- --frame-alert-root-success-border: color-mix(in srgb, #16a34a 28%, var(--frame-border));
14
+ --frame-alert-root-success-bg: color-mix(in srgb, var(--frame-success) 10%, var(--frame-surface));
15
+ --frame-alert-root-success-border: color-mix(in srgb, var(--frame-success) 28%, var(--frame-border));
16
16
  --frame-alert-root-success-color: var(--frame-surface-foreground);
17
- --frame-alert-root-danger-bg: color-mix(in srgb, #d97706 10%, var(--frame-surface));
18
- --frame-alert-root-danger-border: color-mix(in srgb, #d97706 30%, var(--frame-border));
17
+ --frame-alert-root-danger-bg: color-mix(in srgb, var(--frame-warning) 10%, var(--frame-surface));
18
+ --frame-alert-root-danger-border: color-mix(in srgb, var(--frame-warning) 30%, var(--frame-border));
19
19
  --frame-alert-root-danger-color: var(--frame-surface-foreground);
20
- --frame-alert-root-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
21
- --frame-alert-root-info-border: color-mix(in srgb, #2563eb 28%, var(--frame-border));
20
+ --frame-alert-root-info-bg: color-mix(in srgb, var(--frame-info) 10%, var(--frame-surface));
21
+ --frame-alert-root-info-border: color-mix(in srgb, var(--frame-info) 28%, var(--frame-border));
22
22
  --frame-alert-root-info-color: var(--frame-surface-foreground);
23
23
  --frame-alert-title-font-size: 0.9375rem;
24
24
  --frame-alert-title-font-weight: 600;
package/alert/src/styles/alert.css CHANGED
@@ -1,77 +1,77 @@
1
- @import './_vars.css';
2
-
3
- [frAlert] {
4
- display: grid;
5
- grid-template-columns: auto minmax(0, 1fr);
6
- gap: var(--frame-alert-root-gap, 0.75rem);
7
- align-items: start;
8
- border: 1px solid var(--frame-alert-root-border, var(--frame-border));
9
- border-radius: var(--frame-alert-root-radius);
10
- background: var(--frame-alert-root-bg, var(--frame-surface));
11
- /* box-shadow: var(--frame-alert-root-shadow, none); */
12
- color: var(--frame-alert-root-color, var(--frame-surface-foreground));
13
- padding-block: var(--frame-alert-root-padding-y, 1rem);
14
- padding-inline: var(--frame-alert-root-padding-x, 1rem);
15
- }
16
-
17
- [frAlertIcon] {
18
- display: inline-flex;
19
- align-items: center;
20
- justify-content: center;
21
- grid-column: 1;
22
- grid-row: 1;
23
- inline-size: var(--frame-alert-root-icon-size, 1rem);
24
- block-size: var(--frame-alert-root-icon-size, 1rem);
25
- margin-block-start: 0.125rem;
26
- flex: 0 0 auto;
27
- margin-right: 0.125rem;
28
- }
29
-
30
- [frAlert] > :not([frAlertIcon]) {
31
- grid-column: 2;
32
- min-width: 0;
33
- }
34
-
35
- [frAlert][data-variant='destructive'] {
36
- background: var(--frame-alert-root-destructive-bg, color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface)));
37
- border-color: var(--frame-alert-root-destructive-border, color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border)));
38
- color: var(--frame-alert-root-destructive-color, var(--frame-surface-foreground));
39
- }
40
-
41
- [frAlert][data-variant='success'] {
42
- background: var(--frame-alert-root-success-bg, color-mix(in srgb, #16a34a 10%, var(--frame-surface)));
43
- border-color: var(--frame-alert-root-success-border, color-mix(in srgb, #16a34a 28%, var(--frame-border)));
44
- color: var(--frame-alert-root-success-color, var(--frame-surface-foreground));
45
- }
46
-
47
- [frAlert][data-variant='danger'] {
48
- background: var(--frame-alert-root-danger-bg, color-mix(in srgb, #d97706 10%, var(--frame-surface)));
49
- border-color: var(--frame-alert-root-danger-border, color-mix(in srgb, #d97706 30%, var(--frame-border)));
50
- color: var(--frame-alert-root-danger-color, var(--frame-surface-foreground));
51
- }
52
-
53
- [frAlert][data-variant='info'] {
54
- background: var(--frame-alert-root-info-bg, color-mix(in srgb, #2563eb 10%, var(--frame-surface)));
55
- border-color: var(--frame-alert-root-info-border, color-mix(in srgb, #2563eb 28%, var(--frame-border)));
56
- color: var(--frame-alert-root-info-color, var(--frame-surface-foreground));
57
- }
58
-
59
- [frAlertTitle] {
60
- margin: 0;
61
- font-size: var(--frame-alert-title-font-size, 0.9375rem);
62
- font-weight: var(--frame-alert-title-font-weight, 600);
63
- line-height: 1.2;
64
- }
65
-
66
- [frAlertDescription] {
67
- color: var(--frame-alert-description-color, var(--frame-muted-foreground));
68
- font-size: var(--frame-alert-description-font-size, 0.875rem);
69
- line-height: var(--frame-alert-description-line-height, 1.5);
70
- }
71
-
72
- [frAlert][data-variant='destructive'] [frAlertDescription],
73
- [frAlert][data-variant='success'] [frAlertDescription],
74
- [frAlert][data-variant='danger'] [frAlertDescription],
75
- [frAlert][data-variant='info'] [frAlertDescription] {
76
- color: color-mix(in srgb, currentColor 72%, var(--frame-muted-foreground));
77
- }
1
+ @import './_vars.css';
2
+
3
+ [frAlert] {
4
+ display: grid;
5
+ grid-template-columns: auto minmax(0, 1fr);
6
+ gap: var(--frame-alert-root-gap, 0.75rem);
7
+ align-items: start;
8
+ border: 1px solid var(--frame-alert-root-border, var(--frame-border));
9
+ border-radius: var(--frame-alert-root-radius);
10
+ background: var(--frame-alert-root-bg, var(--frame-surface));
11
+ /* box-shadow: var(--frame-alert-root-shadow, none); */
12
+ color: var(--frame-alert-root-color, var(--frame-surface-foreground));
13
+ padding-block: var(--frame-alert-root-padding-y, 1rem);
14
+ padding-inline: var(--frame-alert-root-padding-x, 1rem);
15
+ }
16
+
17
+ [frAlertIcon] {
18
+ display: inline-flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ grid-column: 1;
22
+ grid-row: 1;
23
+ inline-size: var(--frame-alert-root-icon-size, 1rem);
24
+ block-size: var(--frame-alert-root-icon-size, 1rem);
25
+ margin-block-start: 0.125rem;
26
+ flex: 0 0 auto;
27
+ margin-right: 0.125rem;
28
+ }
29
+
30
+ [frAlert] > :not([frAlertIcon]) {
31
+ grid-column: 2;
32
+ min-width: 0;
33
+ }
34
+
35
+ [frAlert][data-variant='destructive'] {
36
+ background: var(--frame-alert-root-destructive-bg, color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface)));
37
+ border-color: var(--frame-alert-root-destructive-border, color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border)));
38
+ color: var(--frame-alert-root-destructive-color, var(--frame-surface-foreground));
39
+ }
40
+
41
+ [frAlert][data-variant='success'] {
42
+ background: var(--frame-alert-root-success-bg, color-mix(in srgb, var(--frame-success) 10%, var(--frame-surface)));
43
+ border-color: var(--frame-alert-root-success-border, color-mix(in srgb, var(--frame-success) 28%, var(--frame-border)));
44
+ color: var(--frame-alert-root-success-color, var(--frame-surface-foreground));
45
+ }
46
+
47
+ [frAlert][data-variant='danger'] {
48
+ background: var(--frame-alert-root-danger-bg, color-mix(in srgb, var(--frame-warning) 10%, var(--frame-surface)));
49
+ border-color: var(--frame-alert-root-danger-border, color-mix(in srgb, var(--frame-warning) 30%, var(--frame-border)));
50
+ color: var(--frame-alert-root-danger-color, var(--frame-surface-foreground));
51
+ }
52
+
53
+ [frAlert][data-variant='info'] {
54
+ background: var(--frame-alert-root-info-bg, color-mix(in srgb, var(--frame-info) 10%, var(--frame-surface)));
55
+ border-color: var(--frame-alert-root-info-border, color-mix(in srgb, var(--frame-info) 28%, var(--frame-border)));
56
+ color: var(--frame-alert-root-info-color, var(--frame-surface-foreground));
57
+ }
58
+
59
+ [frAlertTitle] {
60
+ margin: 0;
61
+ font-size: var(--frame-alert-title-font-size, 0.9375rem);
62
+ font-weight: var(--frame-alert-title-font-weight, 600);
63
+ line-height: 1.2;
64
+ }
65
+
66
+ [frAlertDescription] {
67
+ color: var(--frame-alert-description-color, var(--frame-muted-foreground));
68
+ font-size: var(--frame-alert-description-font-size, 0.875rem);
69
+ line-height: var(--frame-alert-description-line-height, 1.5);
70
+ }
71
+
72
+ [frAlert][data-variant='destructive'] [frAlertDescription],
73
+ [frAlert][data-variant='success'] [frAlertDescription],
74
+ [frAlert][data-variant='danger'] [frAlertDescription],
75
+ [frAlert][data-variant='info'] [frAlertDescription] {
76
+ color: color-mix(in srgb, currentColor 72%, var(--frame-muted-foreground));
77
+ }
package/avatar/src/styles/_vars.css CHANGED
@@ -1,34 +1,34 @@
1
- :root {
2
- --frame-avatar-root-size: 2.5rem;
3
- --frame-avatar-root-radius: 999px;
4
- --frame-avatar-root-bg: var(--frame-muted);
5
- --frame-avatar-root-border: transparent;
6
- --frame-avatar-root-color: var(--frame-muted-foreground);
7
- --frame-avatar-root-font-size: 0.875rem;
8
- --frame-avatar-root-font-weight: 600;
9
- --frame-avatar-root-shadow: none;
10
- --frame-avatar-size-xs: 1.5rem;
11
- --frame-avatar-size-sm: 2rem;
12
- --frame-avatar-size-md: 2.5rem;
13
- --frame-avatar-size-lg: 3.5rem;
14
- --frame-avatar-font-size-xs: 0.5rem;
15
- --frame-avatar-font-size-sm: 0.75rem;
16
- --frame-avatar-font-size-md: 0.875rem;
17
- --frame-avatar-font-size-lg: 1rem;
18
- --frame-avatar-image-fit: cover;
19
- --frame-avatar-fallback-padding: 0.25rem;
20
- --frame-avatar-icon-size: 1rem;
21
- --frame-avatar-badge-size: 1.25rem;
22
- --frame-avatar-badge-radius: 999px;
23
- --frame-avatar-badge-bg: var(--frame-primary);
24
- --frame-avatar-badge-border: var(--frame-surface);
25
- --frame-avatar-badge-color: var(--frame-primary-foreground);
26
- --frame-avatar-badge-font-size: 0.675rem;
27
- --frame-avatar-badge-font-weight: 700;
28
- --frame-avatar-group-overlap: 0.625rem;
29
- --frame-avatar-group-transition-duration: 180ms;
30
- --frame-avatar-group-transition-timing: ease;
31
- --frame-avatar-group-count-bg: var(--frame-surface);
32
- --frame-avatar-group-count-border: var(--frame-border);
33
- --frame-avatar-group-count-color: var(--frame-muted-foreground);
34
- }
1
+ :where(:root) {
2
+ --frame-avatar-root-size: 2.5rem;
3
+ --frame-avatar-root-radius: var(--frame-radius-full);
4
+ --frame-avatar-root-bg: var(--frame-muted);
5
+ --frame-avatar-root-border: transparent;
6
+ --frame-avatar-root-color: var(--frame-muted-foreground);
7
+ --frame-avatar-root-font-size: 0.875rem;
8
+ --frame-avatar-root-font-weight: 600;
9
+ --frame-avatar-root-shadow: none;
10
+ --frame-avatar-size-xs: 1.5rem;
11
+ --frame-avatar-size-sm: 2rem;
12
+ --frame-avatar-size-md: 2.5rem;
13
+ --frame-avatar-size-lg: 3.5rem;
14
+ --frame-avatar-font-size-xs: 0.5rem;
15
+ --frame-avatar-font-size-sm: 0.75rem;
16
+ --frame-avatar-font-size-md: 0.875rem;
17
+ --frame-avatar-font-size-lg: 1rem;
18
+ --frame-avatar-image-fit: cover;
19
+ --frame-avatar-fallback-padding: 0.25rem;
20
+ --frame-avatar-icon-size: 1rem;
21
+ --frame-avatar-badge-size: 1.25rem;
22
+ --frame-avatar-badge-radius: var(--frame-radius-full);
23
+ --frame-avatar-badge-bg: var(--frame-primary);
24
+ --frame-avatar-badge-border: var(--frame-surface);
25
+ --frame-avatar-badge-color: var(--frame-primary-foreground);
26
+ --frame-avatar-badge-font-size: 0.675rem;
27
+ --frame-avatar-badge-font-weight: 700;
28
+ --frame-avatar-group-overlap: 0.625rem;
29
+ --frame-avatar-group-transition-duration: 180ms;
30
+ --frame-avatar-group-transition-timing: ease;
31
+ --frame-avatar-group-count-bg: var(--frame-surface);
32
+ --frame-avatar-group-count-border: var(--frame-border);
33
+ --frame-avatar-group-count-color: var(--frame-muted-foreground);
34
+ }