@anyblades/blades 3.1.0-beta.7 → 3.1.0-rc.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 (74) hide show
  1. package/README.md +128 -134
  2. package/css/blades.css +4 -4
  3. package/css/blades.min.css +4 -4
  4. package/css/blades.ninja.css +4 -4
  5. package/css/blades.ninja.min.css +4 -4
  6. package/css/float-label.css +1 -1
  7. package/css/float-label.min.css +1 -1
  8. package/css/layered/README.md +164 -0
  9. package/css/layered/_compact.css +30 -0
  10. package/css/layered/_utilities.css +23 -0
  11. package/css/layered/_variables-blades.css +8 -0
  12. package/css/layered/_variables.css +258 -0
  13. package/css/layered/blades.layered.css +4 -4
  14. package/css/layered/blades.layered.min.css +4 -4
  15. package/css/layered/components/_accordion.css +93 -0
  16. package/css/layered/components/_card.css +37 -0
  17. package/css/layered/components/_dropdown-popover.css +89 -0
  18. package/css/layered/components/_dropdown.css +188 -0
  19. package/css/layered/components/_group.css +89 -0
  20. package/css/layered/components/_index.css +950 -0
  21. package/css/layered/components/_loading.css +51 -0
  22. package/css/layered/components/_modal-modern.css +17 -0
  23. package/css/layered/components/_modal.css +144 -0
  24. package/css/layered/components/_nav.css +114 -0
  25. package/css/layered/components/_progress.css +68 -0
  26. package/css/layered/components/_timeline.css +7 -0
  27. package/css/layered/components/_tooltip.css +158 -0
  28. package/css/layered/content/_button.css +125 -0
  29. package/css/layered/content/_code-block.css +17 -0
  30. package/css/layered/content/_code.css +46 -0
  31. package/css/layered/content/_embedded-content.css +33 -0
  32. package/css/layered/content/_figure.css +10 -0
  33. package/css/layered/content/_icon.css +30 -0
  34. package/css/layered/content/_index.css +456 -0
  35. package/css/layered/content/_link.css +59 -0
  36. package/css/layered/content/_misc.css +15 -0
  37. package/css/layered/content/_table.css +24 -0
  38. package/css/layered/content/_typography.css +137 -0
  39. package/css/layered/forms/_basics.css +257 -0
  40. package/css/layered/forms/_checkbox-radio-switch.css +132 -0
  41. package/css/layered/forms/_index.css +617 -0
  42. package/css/layered/forms/_input-color.css +17 -0
  43. package/css/layered/forms/_input-datetime.css +37 -0
  44. package/css/layered/forms/_input-file.css +25 -0
  45. package/css/layered/forms/_input-range.css +111 -0
  46. package/css/layered/forms/_input-search.css +32 -0
  47. package/css/layered/forms/float-label/_core.css +28 -0
  48. package/css/layered/forms/float-label/_index.css +54 -0
  49. package/css/layered/forms/float-label/_theme.css +25 -0
  50. package/css/layered/forms/float-label/core.css +1 -1
  51. package/css/layered/forms/float-label.css +1 -1
  52. package/css/layered/layout/_columns.css +7 -0
  53. package/css/layered/layout/_container.css +39 -0
  54. package/css/layered/layout/_document.css +37 -0
  55. package/css/layered/layout/_grid.css +17 -0
  56. package/css/layered/layout/_index.css +103 -0
  57. package/css/layered/layout/_landmarks.css +3 -0
  58. package/css/layered/layout/_overflow-auto.css +3 -0
  59. package/css/layered/layout/_section.css +3 -0
  60. package/css/pico.canonical.css +2512 -0
  61. package/css/pico.canonical.min.css +1 -0
  62. package/css/pico.canonical.unmin.css +2512 -0
  63. package/css/pico.canonical.unmin.min.css +1 -0
  64. package/css/pico.conditional.css +1 -1
  65. package/css/pico.conditional.min.css +1 -1
  66. package/css/pico.css +1 -1
  67. package/css/pico.min.css +1 -1
  68. package/css/pico.unmin.css +2365 -0
  69. package/css/pico.unmin.min.css +7 -0
  70. package/package.json +10 -7
  71. package/src/blades/_index.css +1 -1
  72. package/src/blades/forms/float-label/_core.css +1 -1
  73. package/src/blades.css +1 -1
  74. package/src/pico/_index.css +1 -1
package/css/layered/components/_group.css ADDED
@@ -0,0 +1,89 @@
1
+ :where(:scope), :host {
2
+ --pico-group-box-shadow: 0 0 0 #0000;
3
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
4
+ var(--pico-primary-focus);
5
+ --pico-group-box-shadow-focus-with-input: 0 0 0 .0625rem var(--pico-form-element-border-color);
6
+ }
7
+
8
+ [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
9
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
10
+ var(--pico-secondary-focus);
11
+ }
12
+
13
+ [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
14
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
15
+ var(--pico-contrast-focus);
16
+ }
17
+
18
+ [role="search"], [role="group"] {
19
+ width: 100%;
20
+ margin-bottom: var(--pico-spacing);
21
+ border-radius: var(--pico-border-radius);
22
+ box-shadow: var(--pico-group-box-shadow, 0 0 0 #0000);
23
+ vertical-align: middle;
24
+ transition: box-shadow var(--pico-transition);
25
+ display: inline-flex;
26
+ position: relative;
27
+ }
28
+
29
+ [role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="group"] > *, [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select {
30
+ flex: auto;
31
+ margin-bottom: 0;
32
+ position: relative;
33
+ }
34
+
35
+ [role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] > :not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
36
+ border-top-left-radius: 0;
37
+ border-bottom-left-radius: 0;
38
+ margin-left: 0;
39
+ }
40
+
41
+ [role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="group"] > :not(:last-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child) {
42
+ border-top-right-radius: 0;
43
+ border-bottom-right-radius: 0;
44
+ }
45
+
46
+ [role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, [role="group"] > :focus, [role="group"] input:not([type="checkbox"], [type="radio"]):focus, [role="group"] select:focus {
47
+ z-index: 2;
48
+ }
49
+
50
+ [role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] button:not(:first-child), [role="group"] [type="submit"]:not(:first-child), [role="group"] [type="reset"]:not(:first-child), [role="group"] [type="button"]:not(:first-child), [role="group"] [role="button"]:not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
51
+ margin-left: calc(var(--pico-border-width) * -1);
52
+ }
53
+
54
+ [role="search"] button, [role="search"] [type="submit"], [role="search"] [type="reset"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="reset"], [role="group"] [type="button"], [role="group"] [role="button"] {
55
+ width: auto;
56
+ }
57
+
58
+ @supports selector(:has(*)) {
59
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
60
+ --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
61
+ }
62
+
63
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
64
+ border-color: #0000;
65
+ }
66
+
67
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
68
+ --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
69
+ }
70
+
71
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
72
+ --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
73
+ --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
74
+ }
75
+
76
+ [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"] button:focus, [role="group"] [type="submit"]:focus, [role="group"] [type="reset"]:focus, [role="group"] [type="button"]:focus, [role="group"] [role="button"]:focus {
77
+ box-shadow: none;
78
+ }
79
+ }
80
+
81
+ [role="search"] > :first-child {
82
+ border-top-left-radius: 5rem;
83
+ border-bottom-left-radius: 5rem;
84
+ }
85
+
86
+ [role="search"] > :last-child {
87
+ border-top-right-radius: 5rem;
88
+ border-bottom-right-radius: 5rem;
89
+ }