@frame-ui-ng/components 0.1.0-beta.0 → 0.2.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 (77) hide show
  1. package/accordion/src/styles/_vars.css +25 -25
  2. package/accordion/src/styles/accordion.css +105 -87
  3. package/alert/src/styles/_vars.css +28 -28
  4. package/badge/src/styles/_vars.css +19 -16
  5. package/badge/src/styles/badge.css +132 -125
  6. package/breadcrumb/src/styles/_vars.css +17 -16
  7. package/breadcrumb/src/styles/breadcrumb.css +110 -98
  8. package/button/src/styles/_vars.css +20 -20
  9. package/button/src/styles/button.css +52 -7
  10. package/button-group/src/styles/button-group.css +100 -69
  11. package/calendar/src/styles/_vars.css +29 -29
  12. package/calendar/src/styles/calendar.css +247 -226
  13. package/card/src/styles/_vars.css +17 -17
  14. package/checkbox/src/styles/_vars.css +22 -22
  15. package/collapsible/src/styles/collapsible.css +55 -42
  16. package/combobox/src/styles/_vars.css +61 -60
  17. package/combobox/src/styles/combobox.css +295 -285
  18. package/command/src/styles/_vars.css +47 -37
  19. package/command/src/styles/command.css +236 -171
  20. package/date-picker/src/styles/_vars.css +30 -29
  21. package/date-picker/src/styles/date-picker.css +203 -177
  22. package/dropdown-menu/src/styles/_vars.css +34 -34
  23. package/fesm2022/frame-ui-ng-components-accordion.mjs +26 -11
  24. package/fesm2022/frame-ui-ng-components-accordion.mjs.map +1 -1
  25. package/fesm2022/frame-ui-ng-components-badge.mjs +1 -0
  26. package/fesm2022/frame-ui-ng-components-badge.mjs.map +1 -1
  27. package/fesm2022/frame-ui-ng-components-button.mjs +1 -1
  28. package/fesm2022/frame-ui-ng-components-button.mjs.map +1 -1
  29. package/fesm2022/frame-ui-ng-components-command.mjs +19 -1
  30. package/fesm2022/frame-ui-ng-components-command.mjs.map +1 -1
  31. package/fesm2022/frame-ui-ng-components-toast.mjs +152 -142
  32. package/fesm2022/frame-ui-ng-components-toast.mjs.map +1 -1
  33. package/fesm2022/frame-ui-ng-components.mjs +43 -13
  34. package/fesm2022/frame-ui-ng-components.mjs.map +1 -1
  35. package/input/src/styles/_vars.css +65 -65
  36. package/input/src/styles/input-group.css +114 -112
  37. package/input/src/styles/input.css +197 -163
  38. package/input-otp/src/styles/_vars.css +21 -21
  39. package/item/src/styles/_vars.css +34 -34
  40. package/menubar/src/styles/_vars.css +22 -22
  41. package/modal/src/styles/_vars.css +19 -18
  42. package/modal/src/styles/modal.css +202 -179
  43. package/navigation-menu/src/styles/_vars.css +45 -45
  44. package/package.json +12 -3
  45. package/pagination/src/styles/_vars.css +22 -22
  46. package/pagination/src/styles/pagination.css +158 -138
  47. package/progress/src/styles/_vars.css +15 -15
  48. package/radio-group/src/styles/_vars.css +29 -29
  49. package/radio-group/src/styles/radio-group.css +146 -137
  50. package/resizable/src/styles/_vars.css +20 -20
  51. package/select/src/styles/_vars.css +28 -28
  52. package/select/src/styles/select-trigger.css +138 -95
  53. package/separator/src/styles/_vars.css +9 -9
  54. package/sheet/src/styles/_vars.css +20 -18
  55. package/sheet/src/styles/sheet.css +220 -215
  56. package/sidebar/src/styles/sidebar.css +544 -531
  57. package/slider/src/styles/_vars.css +17 -17
  58. package/src/styles/blueprint.css +666 -0
  59. package/src/styles/components.css +47 -47
  60. package/styles/blueprint.css +666 -0
  61. package/styles/components.css +47 -47
  62. package/styles.css +49 -49
  63. package/switch/src/styles/_vars.css +34 -34
  64. package/switch/src/styles/switch.css +130 -131
  65. package/tabs/src/styles/_vars.css +23 -23
  66. package/textarea/src/styles/_vars.css +20 -20
  67. package/textarea/src/styles/textarea.css +62 -60
  68. package/toast/src/styles/_vars.css +48 -47
  69. package/toast/src/styles/toast.css +279 -314
  70. package/toggle/src/styles/_vars.css +24 -24
  71. package/tooltip/src/styles/_vars.css +21 -21
  72. package/tooltip/src/styles/tooltip.css +105 -103
  73. package/types/frame-ui-ng-components-accordion.d.ts +3 -1
  74. package/types/frame-ui-ng-components-badge.d.ts +2 -2
  75. package/types/frame-ui-ng-components-command.d.ts +7 -2
  76. package/types/frame-ui-ng-components.d.ts +21 -14
  77. package/virtual-scroll/src/styles/virtual-scroll.css +54 -54
package/input/src/styles/_vars.css CHANGED
@@ -1,65 +1,65 @@
1
- :root {
2
- --frame-input-field-gap: 0.5rem;
3
- --frame-input-header-gap: 0.75rem;
4
- --frame-input-field-group-gap: 1rem;
5
- --frame-input-label-font-size: 0.875rem;
6
- --frame-input-label-font-weight: 600;
7
- --frame-input-description-color: var(--frame-muted-foreground);
8
- --frame-input-description-font-size: 0.8125rem;
9
- --frame-input-error-color: var(--frame-destructive);
10
- --frame-input-error-font-size: 0.8125rem;
11
- --frame-input-root-height: 2.5rem;
12
- --frame-input-root-radius: var(--frame-radius-md);
13
- --frame-input-root-bg: var(--frame-surface);
14
- --frame-input-root-color: var(--frame-surface-foreground);
15
- --frame-input-root-border: var(--frame-border);
16
- --frame-input-root-font-size: 0.875rem;
17
- --frame-input-root-padding-inline: 0.875rem;
18
- --frame-input-root-placeholder-color: var(--frame-muted-foreground);
19
- --frame-input-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
20
- --frame-input-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
21
- --frame-input-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 22%, transparent);
22
- --frame-input-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
23
- --frame-input-root-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
24
- --frame-input-root-disabled-opacity: 0.55;
25
- --frame-input-root-disabled-bg: color-mix(in srgb, var(--frame-surface) 55%, var(--frame-muted));
26
- --frame-input-root-disabled-border: color-mix(in srgb, var(--frame-border) 82%, var(--frame-muted));
27
- --frame-input-root-disabled-color: color-mix(in srgb, var(--frame-surface-foreground) 52%, var(--frame-muted-foreground));
28
- --frame-input-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
29
- --frame-input-root-transition-duration: 150ms;
30
- --frame-input-file-padding-block: 0.375rem;
31
- --frame-input-file-button-radius: calc(var(--frame-radius-md) - 2px);
32
- --frame-input-file-button-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
33
- --frame-input-file-button-hover-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
34
- --frame-input-file-button-font-size: 0.8125rem;
35
- --frame-input-file-button-font-weight: 600;
36
- --frame-input-file-button-margin-inline-end: 0.75rem;
37
- --frame-input-file-button-padding: 0.45rem 0.75rem;
38
- --frame-input-file-button-transition-duration: var(--frame-input-root-transition-duration);
39
- --frame-input-badge-height: 1.5rem;
40
- --frame-input-badge-padding-inline: 0.5rem;
41
- --frame-input-badge-radius: 999px;
42
- --frame-input-badge-border: color-mix(in srgb, var(--frame-primary) 24%, transparent);
43
- --frame-input-badge-bg: color-mix(in srgb, var(--frame-primary) 12%, transparent);
44
- --frame-input-badge-color: var(--frame-primary);
45
- --frame-input-badge-font-size: 0.6875rem;
46
- --frame-input-badge-font-weight: 700;
47
- --frame-input-group-height: var(--frame-input-root-height);
48
- --frame-input-group-radius: var(--frame-input-root-radius);
49
- --frame-input-group-bg: var(--frame-input-root-bg);
50
- --frame-input-group-border: var(--frame-input-root-border);
51
- --frame-input-group-focus-border: var(--frame-input-root-focus-border);
52
- --frame-input-group-focus-shadow: var(--frame-input-root-focus-shadow);
53
- --frame-input-group-transition-duration: var(--frame-input-root-transition-duration);
54
- --frame-input-group-disabled-bg: var(--frame-input-root-disabled-bg);
55
- --frame-input-group-disabled-border: var(--frame-input-root-disabled-border);
56
- --frame-input-group-disabled-color: var(--frame-input-root-disabled-color);
57
- --frame-input-group-input-padding-inline: var(--frame-input-root-padding-inline);
58
- --frame-input-group-addon-min-width: 2.5rem;
59
- --frame-input-group-addon-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
60
- --frame-input-group-addon-color: var(--frame-muted-foreground);
61
- --frame-input-group-addon-padding-inline: 0.75rem;
62
- --frame-input-group-addon-border: var(--frame-border);
63
- --frame-input-group-text-font-size: 0.8125rem;
64
- --frame-input-group-text-font-weight: 600;
65
- }
1
+ :root {
2
+ --frame-input-field-gap: 0.5rem;
3
+ --frame-input-header-gap: 0.75rem;
4
+ --frame-input-field-group-gap: 1rem;
5
+ --frame-input-label-font-size: 0.875rem;
6
+ --frame-input-label-font-weight: 600;
7
+ --frame-input-description-color: var(--frame-muted-foreground);
8
+ --frame-input-description-font-size: 0.8125rem;
9
+ --frame-input-error-color: var(--frame-destructive);
10
+ --frame-input-error-font-size: 0.8125rem;
11
+ --frame-input-root-height: 2.5rem;
12
+ --frame-input-root-radius: var(--frame-radius-md);
13
+ --frame-input-root-bg: var(--frame-surface);
14
+ --frame-input-root-color: var(--frame-surface-foreground);
15
+ --frame-input-root-border: var(--frame-border);
16
+ --frame-input-root-font-size: 0.875rem;
17
+ --frame-input-root-padding-inline: 0.875rem;
18
+ --frame-input-root-placeholder-color: var(--frame-muted-foreground);
19
+ --frame-input-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
20
+ --frame-input-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
21
+ --frame-input-root-focus-shadow: none;
22
+ --frame-input-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
23
+ --frame-input-root-invalid-shadow: none;
24
+ --frame-input-root-disabled-opacity: 0.55;
25
+ --frame-input-root-disabled-bg: color-mix(in srgb, var(--frame-surface) 55%, var(--frame-muted));
26
+ --frame-input-root-disabled-border: color-mix(in srgb, var(--frame-border) 82%, var(--frame-muted));
27
+ --frame-input-root-disabled-color: color-mix(in srgb, var(--frame-surface-foreground) 52%, var(--frame-muted-foreground));
28
+ --frame-input-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
29
+ --frame-input-root-transition-duration: 150ms;
30
+ --frame-input-file-padding-block: 0.375rem;
31
+ --frame-input-file-button-radius: 0;
32
+ --frame-input-file-button-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
33
+ --frame-input-file-button-hover-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
34
+ --frame-input-file-button-font-size: 0.8125rem;
35
+ --frame-input-file-button-font-weight: 600;
36
+ --frame-input-file-button-margin-inline-end: 0.75rem;
37
+ --frame-input-file-button-padding: 0.45rem 0.75rem;
38
+ --frame-input-file-button-transition-duration: var(--frame-input-root-transition-duration);
39
+ --frame-input-badge-height: 1.5rem;
40
+ --frame-input-badge-padding-inline: 0.5rem;
41
+ --frame-input-badge-radius: 0;
42
+ --frame-input-badge-border: color-mix(in srgb, var(--frame-primary) 24%, transparent);
43
+ --frame-input-badge-bg: color-mix(in srgb, var(--frame-primary) 12%, transparent);
44
+ --frame-input-badge-color: var(--frame-primary);
45
+ --frame-input-badge-font-size: 0.6875rem;
46
+ --frame-input-badge-font-weight: 700;
47
+ --frame-input-group-height: var(--frame-input-root-height);
48
+ --frame-input-group-radius: var(--frame-input-root-radius);
49
+ --frame-input-group-bg: var(--frame-input-root-bg);
50
+ --frame-input-group-border: var(--frame-input-root-border);
51
+ --frame-input-group-focus-border: var(--frame-input-root-focus-border);
52
+ --frame-input-group-focus-shadow: none;
53
+ --frame-input-group-transition-duration: var(--frame-input-root-transition-duration);
54
+ --frame-input-group-disabled-bg: var(--frame-input-root-disabled-bg);
55
+ --frame-input-group-disabled-border: var(--frame-input-root-disabled-border);
56
+ --frame-input-group-disabled-color: var(--frame-input-root-disabled-color);
57
+ --frame-input-group-input-padding-inline: var(--frame-input-root-padding-inline);
58
+ --frame-input-group-addon-min-width: 2.5rem;
59
+ --frame-input-group-addon-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
60
+ --frame-input-group-addon-color: var(--frame-muted-foreground);
61
+ --frame-input-group-addon-padding-inline: 0.75rem;
62
+ --frame-input-group-addon-border: var(--frame-border);
63
+ --frame-input-group-text-font-size: 0.8125rem;
64
+ --frame-input-group-text-font-weight: 600;
65
+ }
package/input/src/styles/input-group.css CHANGED
@@ -1,112 +1,114 @@
1
- @import './_vars.css';
2
-
3
- .frame-input-group,
4
- [frInputGroup],
5
- frame-input-group {
6
- display: flex;
7
- align-items: stretch;
8
- width: 100%;
9
- min-block-size: var(--frame-input-group-height);
10
- border: 1px solid var(--frame-input-group-border);
11
- border-radius: var(--frame-input-group-radius);
12
- background: var(--frame-input-group-bg);
13
- overflow: hidden;
14
- transition:
15
- border-color var(--frame-input-group-transition-duration) ease,
16
- box-shadow var(--frame-input-group-transition-duration) ease,
17
- background-color var(--frame-input-group-transition-duration) ease;
18
- }
19
-
20
- .frame-input-group:where(:focus-within),
21
- [frInputGroup]:where(:focus-within),
22
- frame-input-group:where(:focus-within) {
23
- border-color: var(--frame-input-group-focus-border);
24
- box-shadow: var(--frame-input-group-focus-shadow);
25
- }
26
-
27
- .frame-input-group:has([frInputGroupInput]:disabled),
28
- [frInputGroup]:has([frInputGroupInput]:disabled),
29
- frame-input-group:has([frInputGroupInput]:disabled) {
30
- background: var(--frame-input-group-disabled-bg);
31
- border-color: var(--frame-input-group-disabled-border);
32
- opacity: var(--frame-input-root-disabled-opacity);
33
- }
34
-
35
- .frame-input-group__input,
36
- [frInputGroupInput] {
37
- box-sizing: border-box;
38
- flex: 1 1 0%;
39
- width: auto;
40
- min-width: 0;
41
- min-block-size: 100%;
42
- border: 0;
43
- font-size: var(--frame-input-root-font-size);
44
- border-radius: 0;
45
- background: transparent;
46
- box-shadow: none;
47
- padding-inline: var(--frame-input-group-input-padding-inline);
48
- outline: none;
49
- }
50
-
51
- .frame-input-group__input:disabled,
52
- [frInputGroupInput]:disabled {
53
- cursor: not-allowed;
54
- color: var(--frame-input-group-disabled-color);
55
- }
56
-
57
- .frame-input-group__input:disabled::placeholder,
58
- [frInputGroupInput]:disabled::placeholder {
59
- color: var(--frame-input-group-disabled-color);
60
- }
61
-
62
- .frame-input-group__input:focus-visible,
63
- [frInputGroupInput]:focus-visible {
64
- border: 0;
65
- box-shadow: none;
66
- }
67
-
68
- .frame-input-group__addon,
69
- [frInputGroupAddon],
70
- frame-input-group-addon {
71
- box-sizing: border-box;
72
- display: inline-flex;
73
- align-items: center;
74
- justify-content: center;
75
- flex: 0 0 auto;
76
- min-block-size: 100%;
77
- min-inline-size: var(--frame-input-group-addon-min-width);
78
- background: var(--frame-input-group-addon-bg);
79
- color: var(--frame-input-group-addon-color);
80
- padding-inline: var(--frame-input-group-addon-padding-inline);
81
- white-space: nowrap;
82
- }
83
-
84
- .frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
85
- .frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon],
86
- [frInputGroup]:has([frInputGroupInput]:disabled) .frame-input-group__addon,
87
- [frInputGroup]:has([frInputGroupInput]:disabled) [frInputGroupAddon],
88
- frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
89
- frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon] {
90
- color: var(--frame-input-group-disabled-color);
91
- }
92
-
93
- .frame-input-group__addon[data-align='inline-start'],
94
- [frInputGroupAddon][data-align='inline-start'],
95
- frame-input-group-addon[data-align='inline-start'] {
96
- border-inline-end: 1px solid var(--frame-input-group-addon-border);
97
- }
98
-
99
- .frame-input-group__addon[data-align='inline-end'],
100
- [frInputGroupAddon][data-align='inline-end'],
101
- frame-input-group-addon[data-align='inline-end'] {
102
- border-inline-start: 1px solid var(--frame-input-group-addon-border);
103
- }
104
-
105
- .frame-input-group__text,
106
- [frInputGroupText],
107
- frame-input-group-text {
108
- font-size: var(--frame-input-group-text-font-size);
109
- font-weight: var(--frame-input-group-text-font-weight);
110
- line-height: 1;
111
- white-space: nowrap;
112
- }
1
+ @import './_vars.css';
2
+
3
+ .frame-input-group,
4
+ [frInputGroup],
5
+ frame-input-group {
6
+ display: flex;
7
+ align-items: stretch;
8
+ width: 100%;
9
+ min-block-size: var(--frame-input-group-height);
10
+ border: 1px solid var(--frame-input-group-border);
11
+ border-radius: var(--frame-input-group-radius);
12
+ background: var(--frame-input-group-bg);
13
+ overflow: hidden;
14
+ transition:
15
+ border-color var(--frame-input-group-transition-duration) ease,
16
+ box-shadow var(--frame-input-group-transition-duration) ease,
17
+ background-color var(--frame-input-group-transition-duration) ease;
18
+ }
19
+
20
+ .frame-input-group:where(:focus-within),
21
+ [frInputGroup]:where(:focus-within),
22
+ frame-input-group:where(:focus-within) {
23
+ border-color: var(--frame-input-group-focus-border);
24
+ box-shadow: var(--frame-input-group-focus-shadow);
25
+ outline: 1px solid var(--frame-ring);
26
+ outline-offset: 2px;
27
+ }
28
+
29
+ .frame-input-group:has([frInputGroupInput]:disabled),
30
+ [frInputGroup]:has([frInputGroupInput]:disabled),
31
+ frame-input-group:has([frInputGroupInput]:disabled) {
32
+ background: var(--frame-input-group-disabled-bg);
33
+ border-color: var(--frame-input-group-disabled-border);
34
+ opacity: var(--frame-input-root-disabled-opacity);
35
+ }
36
+
37
+ .frame-input-group__input,
38
+ [frInputGroupInput] {
39
+ box-sizing: border-box;
40
+ flex: 1 1 0%;
41
+ width: auto;
42
+ min-width: 0;
43
+ min-block-size: 100%;
44
+ border: 0;
45
+ font-size: var(--frame-input-root-font-size);
46
+ border-radius: 0;
47
+ background: transparent;
48
+ box-shadow: none;
49
+ padding-inline: var(--frame-input-group-input-padding-inline);
50
+ outline: none;
51
+ }
52
+
53
+ .frame-input-group__input:disabled,
54
+ [frInputGroupInput]:disabled {
55
+ cursor: not-allowed;
56
+ color: var(--frame-input-group-disabled-color);
57
+ }
58
+
59
+ .frame-input-group__input:disabled::placeholder,
60
+ [frInputGroupInput]:disabled::placeholder {
61
+ color: var(--frame-input-group-disabled-color);
62
+ }
63
+
64
+ .frame-input-group__input:focus-visible,
65
+ [frInputGroupInput]:focus-visible {
66
+ border: 0;
67
+ box-shadow: none;
68
+ }
69
+
70
+ .frame-input-group__addon,
71
+ [frInputGroupAddon],
72
+ frame-input-group-addon {
73
+ box-sizing: border-box;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ flex: 0 0 auto;
78
+ min-block-size: 100%;
79
+ min-inline-size: var(--frame-input-group-addon-min-width);
80
+ background: var(--frame-input-group-addon-bg);
81
+ color: var(--frame-input-group-addon-color);
82
+ padding-inline: var(--frame-input-group-addon-padding-inline);
83
+ white-space: nowrap;
84
+ }
85
+
86
+ .frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
87
+ .frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon],
88
+ [frInputGroup]:has([frInputGroupInput]:disabled) .frame-input-group__addon,
89
+ [frInputGroup]:has([frInputGroupInput]:disabled) [frInputGroupAddon],
90
+ frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
91
+ frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon] {
92
+ color: var(--frame-input-group-disabled-color);
93
+ }
94
+
95
+ .frame-input-group__addon[data-align='inline-start'],
96
+ [frInputGroupAddon][data-align='inline-start'],
97
+ frame-input-group-addon[data-align='inline-start'] {
98
+ border-inline-end: 1px solid var(--frame-input-group-addon-border);
99
+ }
100
+
101
+ .frame-input-group__addon[data-align='inline-end'],
102
+ [frInputGroupAddon][data-align='inline-end'],
103
+ frame-input-group-addon[data-align='inline-end'] {
104
+ border-inline-start: 1px solid var(--frame-input-group-addon-border);
105
+ }
106
+
107
+ .frame-input-group__text,
108
+ [frInputGroupText],
109
+ frame-input-group-text {
110
+ font-size: var(--frame-input-group-text-font-size);
111
+ font-weight: var(--frame-input-group-text-font-weight);
112
+ line-height: 1;
113
+ white-space: nowrap;
114
+ }