srcdev-nuxt-components 9.1.28 → 9.1.30

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 (82) hide show
  1. package/.claude/settings.json +7 -2
  2. package/.claude/settings.local.json +2 -1
  3. package/.claude/skills/components/banner-video.md +178 -0
  4. package/.claude/skills/components/grid-stack.md +133 -0
  5. package/.claude/skills/components/scroll-reveal-frame.md +136 -0
  6. package/.claude/skills/components/scroll-reveal-image.md +161 -0
  7. package/.claude/skills/index.md +9 -1
  8. package/.claude/skills/new-app-scaffold.md +301 -0
  9. package/.claude/skills/setup-postinstall.md +45 -0
  10. package/.claude/skills/theming-override-default.md +6 -0
  11. package/.claude/skills/theming-partial-override.md +131 -0
  12. package/.claude/skills/vue-video-autoplay.md +74 -0
  13. package/README.md +30 -5
  14. package/app/components/01.atoms/banner-video/BannerVideo.vue +207 -0
  15. package/app/components/01.atoms/banner-video/stories/BannerVideo.stories.ts +180 -0
  16. package/app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts +350 -0
  17. package/app/components/01.atoms/banner-video/tests/__snapshots__/BannerVideo.spec.ts.snap +13 -0
  18. package/app/components/01.atoms/grid-stack/GridStack.vue +34 -0
  19. package/app/components/01.atoms/grid-stack/stories/GridStack.stories.ts +162 -0
  20. package/app/components/01.atoms/grid-stack/tests/GridStack.spec.ts +66 -0
  21. package/app/components/01.atoms/scroll-reveal-frame/ScrollRevealFrame.vue +125 -0
  22. package/app/components/01.atoms/scroll-reveal-frame/stories/ScrollRevealFrame.stories.ts +166 -0
  23. package/app/components/01.atoms/scroll-reveal-frame/tests/ScrollRevealFrame.spec.ts +148 -0
  24. package/app/components/01.atoms/scroll-reveal-frame/tests/__snapshots__/ScrollRevealFrame.spec.ts.snap +13 -0
  25. package/app/components/01.atoms/scroll-reveal-image/ScrollRevealImage.vue +96 -0
  26. package/app/components/01.atoms/scroll-reveal-image/stories/ScrollRevealImage.stories.ts +181 -0
  27. package/app/components/01.atoms/scroll-reveal-image/tests/ScrollRevealImage.spec.ts +235 -0
  28. package/app/components/01.atoms/scroll-reveal-image/tests/__snapshots__/ScrollRevealImage.spec.ts.snap +13 -0
  29. package/app/components/03.organisms/services/services-card/stories/ServicesCard.stories.ts +1 -0
  30. package/app/components/03.organisms/services/services-card/tests/ServicesCard.spec.ts +1 -0
  31. package/app/components/03.organisms/services/services-grids/stories/ServicesCardGrid.stories.ts +1 -0
  32. package/app/components/03.organisms/services/services-grids/stories/ServicesSectionGrid.stories.ts +1 -0
  33. package/app/components/03.organisms/services/services-grids/tests/ServicesCardGrid.spec.ts +1 -0
  34. package/app/components/03.organisms/services/services-grids/tests/ServicesSectionGrid.spec.ts +1 -0
  35. package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesSectionGrid.spec.ts.snap +3 -3
  36. package/app/components/03.organisms/services/services-section/stories/ServicesSection.stories.ts +1 -0
  37. package/app/components/03.organisms/services/services-section/tests/ServicesSection.spec.ts +1 -0
  38. package/app/components/03.organisms/services/services-section/tests/__snapshots__/ServicesSection.spec.ts.snap +1 -1
  39. package/app/layouts/default.vue +2 -0
  40. package/app/pages/banner-video.vue +238 -0
  41. package/app/pages/grid-stack.vue +252 -0
  42. package/app/pages/index.vue +5 -0
  43. package/app/pages/ui/scroll-reveal-image.vue +483 -0
  44. package/app/types/types.services.ts +1 -0
  45. package/package.json +1 -1
  46. package/app/assets/styles/extends-layer/srcdev-components/components/_display-prompt-core.css +0 -94
  47. package/app/assets/styles/extends-layer/srcdev-components/components/_display-toast.css +0 -5
  48. package/app/assets/styles/extends-layer/srcdev-components/components/_expanding-panel.css +0 -37
  49. package/app/assets/styles/extends-layer/srcdev-components/components/index.css +0 -3
  50. package/app/assets/styles/extends-layer/srcdev-components/index.css +0 -1
  51. package/app/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css +0 -38
  52. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-button.css +0 -67
  53. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-core.css +0 -87
  54. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css +0 -74
  55. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-with-label.css +0 -14
  56. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-description.css +0 -13
  57. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-error.css +0 -54
  58. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-label.css +0 -21
  59. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-select.css +0 -143
  60. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-text.css +0 -190
  61. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-textarea.css +0 -96
  62. package/app/assets/styles/extends-layer/srcdev-forms/components/_input-toggle-switch.css +0 -68
  63. package/app/assets/styles/extends-layer/srcdev-forms/components/index.css +0 -12
  64. package/app/assets/styles/extends-layer/srcdev-forms/index.css +0 -2
  65. package/app/assets/styles/extends-layer/srcdev-forms/setup/_generic.css +0 -21
  66. package/app/assets/styles/extends-layer/srcdev-forms/setup/index.css +0 -3
  67. package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/_default.css +0 -13
  68. package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/_large.css +0 -12
  69. package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/_medium.css +0 -12
  70. package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/_small.css +0 -12
  71. package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/_x-small.css +0 -11
  72. package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/index.css +0 -23
  73. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_default.css +0 -62
  74. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_error.css +0 -63
  75. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_ghost.css +0 -63
  76. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_info.css +0 -63
  77. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_primary.css +0 -66
  78. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_secondary.css +0 -64
  79. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_success.css +0 -63
  80. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_tertiary.css +0 -63
  81. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_warning.css +0 -63
  82. package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/index.css +0 -7
package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_secondary.css DELETED
@@ -1,64 +0,0 @@
1
- [data-theme="secondary"] {
2
- /* Generic */
3
- --theme-box-shadow: var(--colour-theme-12);
4
-
5
- /* Fieldset & Label */
6
- --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
7
- --form-label-color: light-dark(var(--slate-10), var(--slate-01));
8
-
9
- /* Description */
10
- --form-description-color: light-dark(var(--slate-10), var(--slate-01));
11
-
12
- /* Input Elements */
13
- --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
14
- --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
15
- --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
16
-
17
- /* --theme-input-border: light-dark(var(--slate-09), var(--slate-04)); */
18
- --theme-input-border: var(--slate-04);
19
- --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
20
- --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
21
-
22
- --theme-input-outline: transparent;
23
- --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-01));
24
- --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-01));
25
-
26
- --theme-input-text: var(--slate-00);
27
- --theme-input-text-hover: var(--slate-00);
28
- --theme-input-text-focus: var(--slate-00);
29
- --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
30
-
31
- /* Checkboxes & Radio buttons */
32
- --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
33
- --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
34
- --theme-checkbox-symbol-surface: var(--theme-input-surface);
35
- --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
36
-
37
- /* Toggle Switch */
38
- --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
39
- --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
40
- --theme-toggle-symbol-surface-color: var(--blue-10);
41
- --theme-toggle-symbol-border-color: var(--slate-10);
42
- --theme-toggle-symbol-outline-color: transparent;
43
- --theme-toggle-symbol-icon-color: var(--slate-00);
44
-
45
- /* a11y */
46
- --theme-focus-visible-shadow: var(--colour-theme-1);
47
- --theme-focus-visible-outline: var(--colour-theme-1);
48
-
49
- /* Buttons */
50
- --theme-button-surface: light-dark(var(--slate-09), var(--slate-10));
51
- --theme-button-surface-hover: light-dark(var(--slate-10), var(--slate-10));
52
-
53
- --theme-button-border: light-dark(var(--slate-09), var(--slate-02));
54
- --theme-button-border-hover: light-dark(var(--slate-10), var(--slate-01));
55
- --theme-button-border-focus: light-dark(var(--slate-10), var(--slate-05));
56
-
57
- --theme-button-outline: transparent;
58
- --theme-button-outline-hover: light-dark(var(--slate-10), var(--slate-01));
59
- --theme-button-outline-focus: light-dark(var(--slate-10), var(--slate-01));
60
-
61
- --theme-button-text: var(--slate-00);
62
- --theme-button-text-hover: var(--slate-00);
63
- --theme-button-text-focus: var(--slate-00);
64
- }
package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_success.css DELETED
@@ -1,63 +0,0 @@
1
- [data-theme="success"] {
2
- /* Generic */
3
- --theme-box-shadow: var(--colour-theme-12);
4
-
5
- /* Fieldset & Label */
6
- --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
7
- --form-label-color: light-dark(var(--slate-10), var(--slate-01));
8
-
9
- /* Description */
10
- --form-description-color: light-dark(var(--slate-10), var(--slate-01));
11
-
12
- /* Input Elements */
13
- --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
14
- --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
15
- --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
16
-
17
- --theme-input-border: var(--green-10);
18
- --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
19
- --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
20
-
21
- --theme-input-outline: transparent;
22
- --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-01));
23
- --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-01));
24
-
25
- --theme-input-text: var(--slate-00);
26
- --theme-input-text-hover: var(--slate-00);
27
- --theme-input-text-focus: var(--slate-00);
28
- --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
29
-
30
- /* Checkboxes & Radio buttons */
31
- --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
32
- --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
33
- --theme-checkbox-symbol-surface: var(--theme-input-surface);
34
- --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
35
-
36
- /* Toggle Switch */
37
- --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
38
- --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
39
- --theme-toggle-symbol-surface-color: var(--blue-10);
40
- --theme-toggle-symbol-border-color: var(--slate-10);
41
- --theme-toggle-symbol-outline-color: transparent;
42
- --theme-toggle-symbol-icon-color: var(--slate-00);
43
-
44
- /* a11y */
45
- --theme-focus-visible-shadow: var(--colour-theme-1);
46
- --theme-focus-visible-outline: var(--colour-theme-1);
47
-
48
- /* Buttons */
49
- --theme-button-surface: light-dark(var(--green-05), var(--green-10));
50
- --theme-button-surface-hover: light-dark(var(--green-06), var(--green-10));
51
-
52
- --theme-button-border: light-dark(var(--green-09), var(--green-04));
53
- --theme-button-border-hover: light-dark(var(--green-10), var(--green-05));
54
- --theme-button-border-focus: light-dark(var(--green-10), var(--green-05));
55
-
56
- --theme-button-outline: transparent;
57
- --theme-button-outline-hover: light-dark(var(--green-10), var(--green-05));
58
- --theme-button-outline-focus: light-dark(var(--green-10), var(--green-05));
59
-
60
- --theme-button-text: var(--green-01);
61
- --theme-button-text-hover: var(--green-01);
62
- --theme-button-text-focus: var(--green-01);
63
- }
package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_tertiary.css DELETED
@@ -1,63 +0,0 @@
1
- [data-theme="tertiary"] {
2
- /* Generic */
3
- --theme-box-shadow: var(--colour-theme-12);
4
-
5
- /* Fieldset & Label */
6
- --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
7
- --form-label-color: light-dark(var(--slate-10), var(--slate-01));
8
-
9
- /* Description */
10
- --form-description-color: light-dark(var(--slate-10), var(--slate-01));
11
-
12
- /* Input Elements */
13
- --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
14
- --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
15
-
16
- /* --theme-input-border: light-dark(var(--slate-09), var(--slate-04)); */
17
- --theme-input-border: var(--slate-04);
18
- --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
19
- --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
20
-
21
- --theme-input-outline: transparent;
22
- --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-05));
23
- --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-05));
24
-
25
- --theme-input-text: var(--slate-00);
26
- --theme-input-text-hover: var(--slate-00);
27
- --theme-input-text-focus: var(--slate-00);
28
- --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
29
-
30
- /* Checkboxes & Radio buttons */
31
- --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
32
- --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
33
- --theme-checkbox-symbol-surface: var(--theme-input-surface);
34
- --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
35
-
36
- /* Toggle Switch */
37
- --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
38
- --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
39
- --theme-toggle-symbol-surface-color: var(--blue-10);
40
- --theme-toggle-symbol-border-color: var(--slate-10);
41
- --theme-toggle-symbol-outline-color: transparent;
42
- --theme-toggle-symbol-icon-color: var(--slate-00);
43
-
44
- /* a11y */
45
- --theme-focus-visible-shadow: var(--colour-theme-12);
46
- --theme-focus-visible-outline: var(--colour-theme-12);
47
-
48
- /* Buttons */
49
- --theme-button-surface: var(--slate-00);
50
- --theme-button-surface-hover: var(--slate-01);
51
-
52
- --theme-button-border: light-dark(var(--slate-09), var(--slate-04));
53
- --theme-button-border-hover: light-dark(var(--slate-10), var(--slate-05));
54
- --theme-button-border-focus: light-dark(var(--slate-10), var(--slate-05));
55
-
56
- --theme-button-outline: transparent;
57
- --theme-button-outline-hover: light-dark(var(--slate-10), var(--slate-05));
58
- --theme-button-outline-focus: light-dark(var(--slate-10), var(--slate-05));
59
-
60
- --theme-button-text: var(--slate-10);
61
- --theme-button-text-hover: var(--slate-10);
62
- --theme-button-text-focus: var(--slate-10);
63
- }
package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_warning.css DELETED
@@ -1,63 +0,0 @@
1
- [data-theme="warning"] {
2
- /* Generic */
3
- --theme-box-shadow: var(--colour-theme-12);
4
-
5
- /* Fieldset & Label */
6
- --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
7
- --form-label-color: light-dark(var(--slate-10), var(--slate-01));
8
-
9
- /* Description */
10
- --form-description-color: light-dark(var(--slate-10), var(--slate-01));
11
-
12
- /* Input Elements */
13
- --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
14
- --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
15
- --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
16
-
17
- --theme-input-border: var(--orange-10);
18
- --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
19
- --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
20
-
21
- --theme-input-outline: transparent;
22
- --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-01));
23
- --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-01));
24
-
25
- --theme-input-text: var(--slate-00);
26
- --theme-input-text-hover: var(--slate-00);
27
- --theme-input-text-focus: var(--slate-00);
28
- --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
29
-
30
- /* Checkboxes & Radio buttons */
31
- --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
32
- --theme-checkbox-decorator-color: var(--orange-10);
33
- --theme-checkbox-symbol-surface: var(--orange-10);
34
- --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
35
-
36
- /* Toggle Switch */
37
- --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
38
- --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
39
- --theme-toggle-symbol-surface-color: var(--blue-10);
40
- --theme-toggle-symbol-border-color: var(--slate-10);
41
- --theme-toggle-symbol-outline-color: transparent;
42
- --theme-toggle-symbol-icon-color: var(--slate-00);
43
-
44
- /* a11y */
45
- --theme-focus-visible-shadow: var(--colour-theme-1);
46
- --theme-focus-visible-outline: var(--colour-theme-1);
47
-
48
- /* Buttons */
49
- --theme-button-surface: light-dark(var(--orange-05), var(--orange-10));
50
- --theme-button-surface-hover: light-dark(var(--orange-06), var(--orange-10));
51
-
52
- --theme-button-border: light-dark(var(--orange-09), var(--orange-04));
53
- --theme-button-border-hover: light-dark(var(--orange-10), var(--orange-05));
54
- --theme-button-border-focus: light-dark(var(--orange-10), var(--orange-05));
55
-
56
- --theme-button-outline: transparent;
57
- --theme-button-outline-hover: light-dark(var(--orange-10), var(--orange-05));
58
- --theme-button-outline-focus: light-dark(var(--orange-10), var(--orange-05));
59
-
60
- --theme-button-text: var(--orange-01);
61
- --theme-button-text-hover: var(--orange-01);
62
- --theme-button-text-focus: var(--orange-01);
63
- }
package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/index.css DELETED
@@ -1,7 +0,0 @@
1
- @import "./_primary";
2
- @import "./_secondary";
3
- @import "./_tertiary";
4
- @import "./_ghost";
5
- @import "./_error";
6
- @import "./_success";
7
- @import "./_warning";