@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/textarea/src/styles/textarea.css CHANGED
@@ -1,60 +1,62 @@
1
- @import './_vars.css';
2
-
3
- [frTextarea] {
4
- box-sizing: border-box;
5
- appearance: none;
6
- -webkit-appearance: none;
7
- display: block;
8
- width: 100%;
9
- min-width: 0;
10
- min-height: var(--frame-textarea-root-min-height);
11
- border: 1px solid var(--frame-textarea-root-border);
12
- border-radius: var(--frame-textarea-root-radius);
13
- background: var(--frame-textarea-root-bg);
14
- color: var(--frame-textarea-root-color);
15
- box-shadow: none;
16
- cursor: text;
17
- font: inherit;
18
- font-size: var(--frame-textarea-root-font-size);
19
- line-height: 1.5;
20
- margin: 0;
21
- outline: none;
22
- padding-block: var(--frame-textarea-root-padding-block);
23
- padding-inline: var(--frame-textarea-root-padding-inline);
24
- resize: var(--frame-textarea-root-resize);
25
- transition:
26
- background-color var(--frame-textarea-root-transition-duration) ease,
27
- border-color var(--frame-textarea-root-transition-duration) ease,
28
- box-shadow var(--frame-textarea-root-transition-duration) ease,
29
- color var(--frame-textarea-root-transition-duration) ease,
30
- opacity var(--frame-textarea-root-transition-duration) ease;
31
- }
32
-
33
- [frTextarea]::placeholder {
34
- color: var(--frame-textarea-root-placeholder-color);
35
- }
36
-
37
- [frTextarea]:where(:not(:disabled)):hover {
38
- border-color: var(--frame-textarea-root-hover-border);
39
- }
40
-
41
- [frTextarea]:focus-visible {
42
- border-color: var(--frame-textarea-root-focus-border);
43
- box-shadow: var(--frame-textarea-root-focus-shadow);
44
- }
45
-
46
- [frTextarea][aria-invalid='true'],
47
- [frTextarea].ng-invalid.ng-touched,
48
- [frTextarea].ng-invalid.ng-dirty {
49
- border-color: var(--frame-textarea-root-invalid-border);
50
- box-shadow: var(--frame-textarea-root-invalid-shadow);
51
- }
52
-
53
- [frTextarea]:disabled {
54
- cursor: not-allowed;
55
- opacity: var(--frame-textarea-root-disabled-opacity);
56
- }
57
-
58
- [frTextarea]:read-only {
59
- background: var(--frame-textarea-root-readonly-bg);
60
- }
1
+ @import './_vars.css';
2
+
3
+ [frTextarea] {
4
+ box-sizing: border-box;
5
+ appearance: none;
6
+ -webkit-appearance: none;
7
+ display: block;
8
+ width: 100%;
9
+ min-width: 0;
10
+ min-height: var(--frame-textarea-root-min-height);
11
+ border: 1px solid var(--frame-textarea-root-border);
12
+ border-radius: var(--frame-textarea-root-radius);
13
+ background: var(--frame-textarea-root-bg);
14
+ color: var(--frame-textarea-root-color);
15
+ box-shadow: none;
16
+ cursor: text;
17
+ font: inherit;
18
+ font-size: var(--frame-textarea-root-font-size);
19
+ line-height: 1.5;
20
+ margin: 0;
21
+ outline: none;
22
+ padding-block: var(--frame-textarea-root-padding-block);
23
+ padding-inline: var(--frame-textarea-root-padding-inline);
24
+ resize: var(--frame-textarea-root-resize);
25
+ transition:
26
+ background-color var(--frame-textarea-root-transition-duration) ease,
27
+ border-color var(--frame-textarea-root-transition-duration) ease,
28
+ box-shadow var(--frame-textarea-root-transition-duration) ease,
29
+ color var(--frame-textarea-root-transition-duration) ease,
30
+ opacity var(--frame-textarea-root-transition-duration) ease;
31
+ }
32
+
33
+ [frTextarea]::placeholder {
34
+ color: var(--frame-textarea-root-placeholder-color);
35
+ }
36
+
37
+ [frTextarea]:where(:not(:disabled)):hover {
38
+ border-color: var(--frame-textarea-root-hover-border);
39
+ }
40
+
41
+ [frTextarea]:focus-visible {
42
+ border-color: var(--frame-textarea-root-focus-border);
43
+ box-shadow: var(--frame-textarea-root-focus-shadow);
44
+ outline: 1px solid var(--frame-ring);
45
+ outline-offset: 2px
46
+ }
47
+
48
+ [frTextarea][aria-invalid='true'],
49
+ [frTextarea].ng-invalid.ng-touched,
50
+ [frTextarea].ng-invalid.ng-dirty {
51
+ border-color: var(--frame-textarea-root-invalid-border);
52
+ box-shadow: var(--frame-textarea-root-invalid-shadow);
53
+ }
54
+
55
+ [frTextarea]:disabled {
56
+ cursor: not-allowed;
57
+ opacity: var(--frame-textarea-root-disabled-opacity);
58
+ }
59
+
60
+ [frTextarea]:read-only {
61
+ background: var(--frame-textarea-root-readonly-bg);
62
+ }
package/toast/src/styles/_vars.css CHANGED
@@ -1,47 +1,48 @@
1
- :root {
2
- --frame-toast-viewport-inset: 1rem;
3
- --frame-toast-viewport-width: min(100vw - 2rem, 26rem);
4
- --frame-toast-stack-offset: 0.875rem;
5
- --frame-toast-stack-depth: 2.25rem;
6
- --frame-toast-stack-scale-step: 0.025;
7
- --frame-toast-stack-expanded-gap: 0.75rem;
8
- --frame-toast-stack-expanded-depth: 28rem;
9
- --frame-toast-padding: 0.875rem 0.5rem 0.875rem 0.875rem;
10
- --frame-toast-gap: 0.75rem;
11
- --frame-toast-radius: var(--frame-radius-lg);
12
- --frame-toast-bg: var(--frame-surface);
13
- --frame-toast-color: var(--frame-foreground);
14
- --frame-toast-border: var(--frame-border);
15
- --frame-toast-shadow: 0 18px 45px rgb(0 0 0 / 0.14);
16
- --frame-toast-title-font-size: 0.875rem;
17
- --frame-toast-title-font-weight: 650;
18
- --frame-toast-description-font-size: 0.8125rem;
19
- --frame-toast-description-color: var(--frame-muted-foreground);
20
- --frame-toast-status-size: 0.625rem;
21
- --frame-toast-status-bg: var(--frame-muted-foreground);
22
- --frame-toast-action-bg: var(--frame-primary);
23
- --frame-toast-action-color: var(--frame-primary-foreground);
24
- --frame-toast-action-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, black);
25
- --frame-toast-action-radius: var(--frame-radius-md);
26
- --frame-toast-close-size: 1.75rem;
27
- --frame-toast-close-icon-size: 1rem;
28
- --frame-toast-close-color: var(--frame-muted-foreground);
29
- --frame-toast-close-hover-bg: var(--frame-accent);
30
- --frame-toast-motion-duration: 180ms;
31
- --frame-toast-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
32
- --frame-toast-stack-transition-duration: 220ms;
33
- --frame-toast-stack-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
34
- --frame-toast-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
35
- --frame-toast-success-border: color-mix(in srgb, #16a34a 26%, var(--frame-border));
36
- --frame-toast-success-status-bg: #16a34a;
37
- --frame-toast-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
38
- --frame-toast-info-border: color-mix(in srgb, #2563eb 26%, var(--frame-border));
39
- --frame-toast-info-status-bg: #2563eb;
40
- --frame-toast-warning-bg: color-mix(in srgb, #f59e0b 12%, var(--frame-surface));
41
- --frame-toast-warning-border: color-mix(in srgb, #f59e0b 30%, var(--frame-border));
42
- --frame-toast-warning-status-bg: #f59e0b;
43
- --frame-toast-error-bg: color-mix(in srgb, #dc2626 10%, var(--frame-surface));
44
- --frame-toast-error-border: color-mix(in srgb, #dc2626 30%, var(--frame-border));
45
- --frame-toast-error-status-bg: #dc2626;
46
- --frame-toast-loading-status-bg: var(--frame-primary);
47
- }
1
+ :root {
2
+ --frame-toast-z-index: 2147483647;
3
+ --frame-toast-viewport-inset: 1rem;
4
+ --frame-toast-viewport-width: min(100vw - 2rem, 26rem);
5
+ --frame-toast-stack-offset: 0.875rem;
6
+ --frame-toast-stack-depth: 2.25rem;
7
+ --frame-toast-stack-scale-step: 0.025;
8
+ --frame-toast-stack-expanded-gap: 0.75rem;
9
+ --frame-toast-stack-expanded-depth: 28rem;
10
+ --frame-toast-padding: 0.875rem 0.5rem 0.875rem 0.875rem;
11
+ --frame-toast-gap: 0.75rem;
12
+ --frame-toast-radius: var(--frame-radius-lg);
13
+ --frame-toast-bg: var(--frame-surface);
14
+ --frame-toast-color: var(--frame-foreground);
15
+ --frame-toast-border: var(--frame-border);
16
+ --frame-toast-shadow: 0 18px 45px rgb(0 0 0 / 0.14);
17
+ --frame-toast-title-font-size: 0.875rem;
18
+ --frame-toast-title-font-weight: 650;
19
+ --frame-toast-description-font-size: 0.8125rem;
20
+ --frame-toast-description-color: var(--frame-muted-foreground);
21
+ --frame-toast-status-size: 0.625rem;
22
+ --frame-toast-status-bg: var(--frame-muted-foreground);
23
+ --frame-toast-action-bg: var(--frame-primary);
24
+ --frame-toast-action-color: var(--frame-primary-foreground);
25
+ --frame-toast-action-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, black);
26
+ --frame-toast-action-radius: var(--frame-radius-md);
27
+ --frame-toast-close-size: 1.75rem;
28
+ --frame-toast-close-icon-size: 1rem;
29
+ --frame-toast-close-color: var(--frame-muted-foreground);
30
+ --frame-toast-close-hover-bg: var(--frame-accent);
31
+ --frame-toast-motion-duration: 180ms;
32
+ --frame-toast-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
33
+ --frame-toast-stack-transition-duration: 220ms;
34
+ --frame-toast-stack-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
35
+ --frame-toast-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
36
+ --frame-toast-success-border: color-mix(in srgb, #16a34a 26%, var(--frame-border));
37
+ --frame-toast-success-status-bg: #16a34a;
38
+ --frame-toast-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
39
+ --frame-toast-info-border: color-mix(in srgb, #2563eb 26%, var(--frame-border));
40
+ --frame-toast-info-status-bg: #2563eb;
41
+ --frame-toast-warning-bg: color-mix(in srgb, #f59e0b 12%, var(--frame-surface));
42
+ --frame-toast-warning-border: color-mix(in srgb, #f59e0b 30%, var(--frame-border));
43
+ --frame-toast-warning-status-bg: #f59e0b;
44
+ --frame-toast-error-bg: color-mix(in srgb, #dc2626 10%, var(--frame-surface));
45
+ --frame-toast-error-border: color-mix(in srgb, #dc2626 30%, var(--frame-border));
46
+ --frame-toast-error-status-bg: #dc2626;
47
+ --frame-toast-loading-status-bg: var(--frame-primary);
48
+ }