@grantcodes/ui 2.10.0 → 2.10.1

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 (97) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/src/components/accordion/accordion.component.js +3 -1
  4. package/src/components/accordion/accordion.css +47 -42
  5. package/src/components/accordion/accordion.react.js +4 -4
  6. package/src/components/app-bar/app-bar.component.js +15 -9
  7. package/src/components/app-bar/app-bar.css +256 -250
  8. package/src/components/app-bar/app-bar.react.js +4 -4
  9. package/src/components/app-bar/app-bar.test.js +1 -3
  10. package/src/components/app-bar/nav-link.component.js +3 -1
  11. package/src/components/app-bar/nav-link.css +50 -45
  12. package/src/components/app-bar/nav-link.react.js +4 -4
  13. package/src/components/avatar/avatar.css +19 -21
  14. package/src/components/avatar/avatar.react.js +4 -4
  15. package/src/components/badge/badge.css +51 -51
  16. package/src/components/badge/badge.react.js +4 -4
  17. package/src/components/breadcrumb/breadcrumb.component.js +3 -1
  18. package/src/components/breadcrumb/breadcrumb.css +73 -73
  19. package/src/components/breadcrumb/breadcrumb.react.js +8 -5
  20. package/src/components/button/button.component.js +3 -1
  21. package/src/components/button/button.css +38 -38
  22. package/src/components/button/button.react.js +4 -4
  23. package/src/components/button-group/button-group.css +33 -33
  24. package/src/components/button-group/button-group.react.js +4 -4
  25. package/src/components/card/card.css +150 -150
  26. package/src/components/card/card.react.js +4 -4
  27. package/src/components/code-preview/code-preview.css +11 -12
  28. package/src/components/code-preview/code-preview.react.js +4 -4
  29. package/src/components/container/container.css +37 -37
  30. package/src/components/container/container.react.js +4 -4
  31. package/src/components/countdown/countdown.component.js +5 -3
  32. package/src/components/countdown/countdown.stories.js +1 -2
  33. package/src/components/cta/cta.css +55 -55
  34. package/src/components/cta/cta.react.js +4 -4
  35. package/src/components/dialog/dialog.css +48 -49
  36. package/src/components/dialog/dialog.react.js +4 -4
  37. package/src/components/dropdown/dropdown.css +123 -121
  38. package/src/components/dropdown/dropdown.react.js +5 -5
  39. package/src/components/dropzone/dropzone.css +5 -3
  40. package/src/components/dropzone/dropzone.react.js +4 -4
  41. package/src/components/feature-list/feature-list.css +71 -71
  42. package/src/components/feature-list/feature-list.react.js +4 -4
  43. package/src/components/footer/footer-column.css +39 -39
  44. package/src/components/footer/footer.css +68 -69
  45. package/src/components/footer/footer.react.js +5 -5
  46. package/src/components/form-field/form-field.css +40 -40
  47. package/src/components/form-field/form-field.react.js +4 -4
  48. package/src/components/gallery/gallery-image.react.js +4 -4
  49. package/src/components/gallery/gallery.css +72 -72
  50. package/src/components/gallery/gallery.react.js +4 -4
  51. package/src/components/gallery/gallery.test.js +5 -1
  52. package/src/components/hero/hero.css +61 -57
  53. package/src/components/hero/hero.react.js +4 -4
  54. package/src/components/icon/icon.css +27 -27
  55. package/src/components/icon/icon.react.js +4 -4
  56. package/src/components/loading/loading.css +30 -31
  57. package/src/components/loading/loading.react.js +4 -4
  58. package/src/components/logo-cloud/logo-cloud.css +60 -60
  59. package/src/components/logo-cloud/logo-cloud.react.js +4 -4
  60. package/src/components/map/map.component.js +3 -4
  61. package/src/components/map/map.css +36 -36
  62. package/src/components/media-text/media-text.css +58 -58
  63. package/src/components/media-text/media-text.react.js +4 -4
  64. package/src/components/newsletter/newsletter.css +78 -78
  65. package/src/components/newsletter/newsletter.react.js +4 -4
  66. package/src/components/notice/notice.css +38 -38
  67. package/src/components/notice/notice.react.js +4 -4
  68. package/src/components/pagination/pagination.css +6 -7
  69. package/src/components/pagination/pagination.react.js +4 -4
  70. package/src/components/pricing/pricing.css +137 -137
  71. package/src/components/pricing/pricing.react.js +4 -4
  72. package/src/components/sidebar/sidebar.component.js +3 -1
  73. package/src/components/sidebar/sidebar.css +180 -180
  74. package/src/components/sidebar/sidebar.react.js +4 -4
  75. package/src/components/stats/stats.css +58 -58
  76. package/src/components/stats/stats.react.js +4 -4
  77. package/src/components/tabs/internal/tabs-button.component.js +3 -1
  78. package/src/components/tabs/internal/tabs-button.react.js +4 -4
  79. package/src/components/tabs/tab.component.js +3 -1
  80. package/src/components/tabs/tab.react.js +4 -4
  81. package/src/components/tabs/tabs.component.js +3 -1
  82. package/src/components/tabs/tabs.css +82 -82
  83. package/src/components/tabs/tabs.react.js +4 -4
  84. package/src/components/testimonials/testimonials.css +72 -72
  85. package/src/components/testimonials/testimonials.react.js +4 -4
  86. package/src/components/toast/toast.component.js +3 -1
  87. package/src/components/toast/toast.css +198 -198
  88. package/src/components/toast/toast.react.js +5 -5
  89. package/src/components/tooltip/tooltip.css +52 -51
  90. package/src/components/tooltip/tooltip.react.js +4 -4
  91. package/src/css/reset.css +102 -102
  92. package/src/css/typography.css +13 -11
  93. package/src/exports.test.js +101 -95
  94. package/src/lib/styles/all.css +37 -37
  95. package/src/lib/styles/focus-ring.css +20 -20
  96. package/src/react.js +45 -39
  97. package/vite-plugin-css-import-attributes.js +5 -2
@@ -1,91 +1,91 @@
1
- *,
2
- *::before,
3
- *::after {
4
- box-sizing: border-box;
5
- }
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
6
 
7
- .tabs {
8
- --border-width: 3px;
9
- display: block;
10
- }
7
+ .tabs {
8
+ --border-width: 3px;
9
+ display: block;
10
+ }
11
11
 
12
- .tabs__tablist {
13
- overflow: auto;
14
- contain: none;
15
- }
12
+ .tabs__tablist {
13
+ overflow: auto;
14
+ contain: none;
15
+ }
16
16
 
17
- .tabs__tablist__inner {
18
- position: relative;
19
- display: flex;
20
- flex-direction: row;
21
- flex-wrap: nowrap;
22
- width: fit-content;
23
- min-width: 100%;
24
- background-image: linear-gradient(
25
- var(--g-theme-color-border-default, var(--g-theme-color-primary-100)),
26
- var(--g-theme-color-border-default, var(--g-theme-color-primary-100))
27
- );
28
- background-size: auto var(--border-width);
29
- background-position: bottom;
30
- background-repeat: repeat-x;
31
- }
17
+ .tabs__tablist__inner {
18
+ position: relative;
19
+ display: flex;
20
+ flex-direction: row;
21
+ flex-wrap: nowrap;
22
+ width: fit-content;
23
+ min-width: 100%;
24
+ background-image: linear-gradient(
25
+ var(--g-theme-color-border-default, var(--g-theme-color-primary-100)),
26
+ var(--g-theme-color-border-default, var(--g-theme-color-primary-100))
27
+ );
28
+ background-size: auto var(--border-width);
29
+ background-position: bottom;
30
+ background-repeat: repeat-x;
31
+ }
32
32
 
33
- .tabs__tab {
34
- padding: 0.6em 1.2em;
35
- line-height: 1;
36
- font-size: var(--g-theme-typography-body-default-font-size);
37
- border: none;
38
- border-block-start: var(--border-width) solid transparent;
39
- border-block-end: var(--border-width) solid
40
- var(--g-theme-color-border-default, var(--g-theme-color-primary-100));
41
- background-color: transparent;
42
- color: var(--g-theme-color-content-default);
43
- opacity: 0.7;
44
- white-space: nowrap;
45
- cursor: pointer;
46
- transition:
47
- opacity 0.2s,
48
- border-color 0.2s,
49
- background-color 0.2s;
50
- }
33
+ .tabs__tab {
34
+ padding: 0.6em 1.2em;
35
+ line-height: 1;
36
+ font-size: var(--g-theme-typography-body-default-font-size);
37
+ border: none;
38
+ border-block-start: var(--border-width) solid transparent;
39
+ border-block-end: var(--border-width) solid
40
+ var(--g-theme-color-border-default, var(--g-theme-color-primary-100));
41
+ background-color: transparent;
42
+ color: var(--g-theme-color-content-default);
43
+ opacity: 0.7;
44
+ white-space: nowrap;
45
+ cursor: pointer;
46
+ transition:
47
+ opacity 0.2s,
48
+ border-color 0.2s,
49
+ background-color 0.2s;
50
+ }
51
51
 
52
- @media (min-width: 40em) {
53
- .tabs__tab {
54
- padding-inline: var(--g-theme-spacing-md);
55
- }
56
- }
52
+ @media (min-width: 40em) {
53
+ .tabs__tab {
54
+ padding-inline: var(--g-theme-spacing-md);
55
+ }
56
+ }
57
57
 
58
- .tabs__tab:hover,
59
- .tabs__tab:focus-visible {
60
- opacity: 1;
61
- border-block-end-color: var(
62
- --g-theme-color-border-default,
63
- var(--g-theme-color-primary-200)
64
- );
65
- }
58
+ .tabs__tab:hover,
59
+ .tabs__tab:focus-visible {
60
+ opacity: 1;
61
+ border-block-end-color: var(
62
+ --g-theme-color-border-default,
63
+ var(--g-theme-color-primary-200)
64
+ );
65
+ }
66
66
 
67
- .tabs__tab.is-active {
68
- border-block-end-color: var(
69
- --g-theme-color-border-primary,
70
- var(--g-theme-color-primary-500)
71
- );
72
- background-color: var(--g-theme-color-background-subtle);
73
- color: var(--g-theme-color-content-default);
74
- z-index: 1;
75
- position: relative;
76
- opacity: 1;
77
- }
67
+ .tabs__tab.is-active {
68
+ border-block-end-color: var(
69
+ --g-theme-color-border-primary,
70
+ var(--g-theme-color-primary-500)
71
+ );
72
+ background-color: var(--g-theme-color-background-subtle);
73
+ color: var(--g-theme-color-content-default);
74
+ z-index: 1;
75
+ position: relative;
76
+ opacity: 1;
77
+ }
78
78
 
79
- .tabs__panel {
80
- margin-block-start: var(--g-theme-spacing-md);
81
- outline-color: var(
82
- --g-theme-color-border-primary,
83
- var(--g-theme-color-primary-500)
84
- );
85
- outline-offset: 1rem;
86
- display: none;
87
- }
79
+ .tabs__panel {
80
+ margin-block-start: var(--g-theme-spacing-md);
81
+ outline-color: var(
82
+ --g-theme-color-border-primary,
83
+ var(--g-theme-color-primary-500)
84
+ );
85
+ outline-offset: 1rem;
86
+ display: none;
87
+ }
88
88
 
89
- .tabs__panel.is-active {
90
- display: block;
91
- }
89
+ .tabs__panel.is-active {
90
+ display: block;
91
+ }
@@ -1,9 +1,9 @@
1
- import React from "react"
2
- import { createComponent } from "@lit/react"
3
- import { GrantCodesTabs } from "./tabs.js"
1
+ import React from "react";
2
+ import { createComponent } from "@lit/react";
3
+ import { GrantCodesTabs } from "./tabs.js";
4
4
 
5
5
  export const Tabs = createComponent({
6
6
  tagName: "grantcodes-tabs",
7
7
  elementClass: GrantCodesTabs,
8
8
  react: React,
9
- })
9
+ });
@@ -1,84 +1,84 @@
1
- *,
2
- *::before,
3
- *::after {
4
- box-sizing: border-box;
5
- }
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
6
 
7
- :host {
8
- display: block;
9
- }
7
+ :host {
8
+ display: block;
9
+ }
10
10
 
11
- .testimonials {
12
- padding-block: var(--g-theme-spacing-3xl);
13
- padding-inline: var(--g-theme-spacing-md);
14
- }
11
+ .testimonials {
12
+ padding-block: var(--g-theme-spacing-3xl);
13
+ padding-inline: var(--g-theme-spacing-md);
14
+ }
15
15
 
16
- .testimonials__container {
17
- max-width: 1200px;
18
- margin: 0 auto;
19
- }
16
+ .testimonials__container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ }
20
20
 
21
- .testimonials__title {
22
- margin: 0 0 var(--g-theme-spacing-2xl);
23
- font-size: var(--g-theme-typography-h4-font-size);
24
- font-weight: var(--g-theme-typography-h4-font-weight);
25
- text-align: center;
26
- color: var(--g-theme-color-content-default);
27
- }
21
+ .testimonials__title {
22
+ margin: 0 0 var(--g-theme-spacing-2xl);
23
+ font-size: var(--g-theme-typography-h4-font-size);
24
+ font-weight: var(--g-theme-typography-h4-font-weight);
25
+ text-align: center;
26
+ color: var(--g-theme-color-content-default);
27
+ }
28
28
 
29
- .testimonials__grid--cards {
30
- display: grid;
31
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
32
- gap: var(--g-theme-spacing-lg);
33
- padding: 0;
34
- margin: 0;
35
- list-style: none;
36
- }
29
+ .testimonials__grid--cards {
30
+ display: grid;
31
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
32
+ gap: var(--g-theme-spacing-lg);
33
+ padding: 0;
34
+ margin: 0;
35
+ list-style: none;
36
+ }
37
37
 
38
- .testimonials__grid--list {
39
- display: flex;
40
- flex-direction: column;
41
- gap: var(--g-theme-spacing-xl);
42
- max-width: 65ch;
43
- margin: 0 auto;
44
- padding: 0;
45
- list-style: none;
46
- }
38
+ .testimonials__grid--list {
39
+ display: flex;
40
+ flex-direction: column;
41
+ gap: var(--g-theme-spacing-xl);
42
+ max-width: 65ch;
43
+ margin: 0 auto;
44
+ padding: 0;
45
+ list-style: none;
46
+ }
47
47
 
48
- .testimonials__quote {
49
- margin: 0;
50
- display: flex;
51
- flex-direction: column;
52
- gap: var(--g-theme-spacing-lg);
53
- height: 100%;
54
- }
48
+ .testimonials__quote {
49
+ margin: 0;
50
+ display: flex;
51
+ flex-direction: column;
52
+ gap: var(--g-theme-spacing-lg);
53
+ height: 100%;
54
+ }
55
55
 
56
- .testimonials__text {
57
- margin: 0;
58
- font: var(--g-theme-typography-body-default);
59
- color: var(--g-theme-color-content-default);
60
- flex: 1;
61
- }
56
+ .testimonials__text {
57
+ margin: 0;
58
+ font: var(--g-theme-typography-body-default);
59
+ color: var(--g-theme-color-content-default);
60
+ flex: 1;
61
+ }
62
62
 
63
- .testimonials__attribution {
64
- display: flex;
65
- align-items: center;
66
- gap: var(--g-theme-spacing-sm);
67
- }
63
+ .testimonials__attribution {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--g-theme-spacing-sm);
67
+ }
68
68
 
69
- .testimonials__meta {
70
- display: flex;
71
- flex-direction: column;
72
- gap: var(--g-theme-spacing-xs);
73
- }
69
+ .testimonials__meta {
70
+ display: flex;
71
+ flex-direction: column;
72
+ gap: var(--g-theme-spacing-xs);
73
+ }
74
74
 
75
- .testimonials__name {
76
- font: var(--g-theme-typography-label-default);
77
- font-style: normal;
78
- color: var(--g-theme-color-content-default);
79
- }
75
+ .testimonials__name {
76
+ font: var(--g-theme-typography-label-default);
77
+ font-style: normal;
78
+ color: var(--g-theme-color-content-default);
79
+ }
80
80
 
81
- .testimonials__role {
82
- font-size: var(--g-theme-typography-body-sm-font-size);
83
- color: var(--g-theme-color-content-subtle);
84
- }
81
+ .testimonials__role {
82
+ font-size: var(--g-theme-typography-body-sm-font-size);
83
+ color: var(--g-theme-color-content-subtle);
84
+ }
@@ -1,9 +1,9 @@
1
- import React from "react"
2
- import { createComponent } from "@lit/react"
3
- import { GrantCodesTestimonials } from "./testimonials.js"
1
+ import React from "react";
2
+ import { createComponent } from "@lit/react";
3
+ import { GrantCodesTestimonials } from "./testimonials.js";
4
4
 
5
5
  export const Testimonials = createComponent({
6
6
  tagName: "grantcodes-testimonials",
7
7
  elementClass: GrantCodesTestimonials,
8
8
  react: React,
9
- })
9
+ });
@@ -1,7 +1,9 @@
1
1
  import { html, LitElement } from "lit";
2
2
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
3
3
  import { classMap } from "lit/directives/class-map.js";
4
- import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
4
+ import focusRingStyles from "../../lib/styles/focus-ring.css" with {
5
+ type: "css",
6
+ };
5
7
  import toastStyles from "./toast.css" with { type: "css" };
6
8
  import { GrantCodesIcon } from "../icon/icon.component.js";
7
9
  import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";