blue-web 1.20.0 → 1.21.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.
package/dist/style.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Blue Web v1.20.0 (https://bruegmann.github.io/blue-web)
2
+ * Blue Web v1.21.0 (https://bruegmann.github.io/blue-web)
3
3
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
4
4
  */
5
5
 
@@ -34,3 +34,9 @@
34
34
  }
35
35
  }
36
36
  }
37
+
38
+ .btn:has(+ :popover-open):not(:focus-visible):not(.blue-menu-item) {
39
+ --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), 0.25);
40
+ box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0)
41
+ var(--bs-focus-ring-width) var(--bs-focus-ring-color);
42
+ }
@@ -43,3 +43,4 @@ $focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;
43
43
  $input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
44
44
 
45
45
  $enable-button-pointers: false !default;
46
+ $focus-ring-width: 0.125rem !default;
@@ -108,6 +108,12 @@
108
108
  grid-area: side;
109
109
  overflow: auto;
110
110
  background: inherit;
111
+ scrollbar-color: transparent transparent;
112
+
113
+ &:hover,
114
+ &:focus-within {
115
+ scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
116
+ }
111
117
  }
112
118
 
113
119
  @media (width < 64rem) {
@@ -143,6 +149,7 @@
143
149
  margin-left: auto;
144
150
  margin-right: auto;
145
151
  overflow: auto;
152
+ scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
146
153
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
147
154
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
148
155
  box-shadow: var(--bs-box-shadow-sm);
@@ -32,9 +32,11 @@
32
32
  (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
33
33
  );
34
34
  margin-bottom: 0.25rem;
35
+ padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
36
+ gap: var(--blue-scrollspy-marker-group-gap);
35
37
  }
36
38
 
37
- & > section {
39
+ & > :is(section, .blue-scrollspy-group) {
38
40
  &::scroll-marker {
39
41
  content: attr(aria-label);
40
42
 
@@ -4,3 +4,17 @@
4
4
  .m-last-0:last-child {
5
5
  margin: 0 !important;
6
6
  }
7
+
8
+ // Shows empty message if the element has no children.
9
+ // Can be used for lists and such.
10
+ // For localization you should override CSS variable `--message` dynamically.
11
+ .blue-empty-message {
12
+ --message: "No items found.";
13
+ &:empty::before {
14
+ content: var(--message);
15
+ color: var(--bs-secondary-color);
16
+ display: flex;
17
+ padding: 1rem;
18
+ justify-content: center;
19
+ }
20
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blue-web",
3
- "version": "1.20.0",
3
+ "version": "1.21.0",
4
4
  "description": "UI components built on top of Bootstrap 5",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "type": "module",
@@ -50,7 +50,7 @@
50
50
  "astro": "^5.15.4",
51
51
  "autoprefixer": "^10.3.6",
52
52
  "babel-loader": "^8.4.1",
53
- "blue-react": "file:../blue-react/blue-react-10.2.1010.tgz",
53
+ "blue-react": "^11.0.2",
54
54
  "blue-themify": "^1.0.0",
55
55
  "colorjs.io": "^0.5.2",
56
56
  "gh-pages": "^3.1.0",