@patternfly/patternfly 6.5.0-prerelease.7 → 6.5.0-prerelease.9

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 (17) hide show
  1. package/base/patternfly-common.css +46 -0
  2. package/base/patternfly-common.scss +56 -0
  3. package/components/Card/card.scss +1 -1
  4. package/components/DataList/data-list.css +5 -1
  5. package/components/DataList/data-list.scss +6 -1
  6. package/components/Tabs/tabs.css +13 -1
  7. package/components/Tabs/tabs.scss +17 -1
  8. package/components/_index.css +18 -2
  9. package/docs/components/DataList/examples/DataList.md +181 -185
  10. package/docs/components/Tabs/examples/Tabs.md +188 -0
  11. package/package.json +1 -1
  12. package/patternfly-base-no-globals.css +46 -0
  13. package/patternfly-base.css +46 -0
  14. package/patternfly-no-globals.css +64 -2
  15. package/patternfly.css +64 -2
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -2986,6 +2986,193 @@ cssPrefix: pf-v6-c-tabs
2986
2986
 
2987
2987
  ```
2988
2988
 
2989
+ ### Site navigation variation
2990
+
2991
+ ```html isBeta
2992
+ <div class="pf-v6-c-tabs pf-m-nav" role="region" id="nav-tabs">
2993
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2994
+ <button
2995
+ class="pf-v6-c-button pf-m-plain"
2996
+ type="button"
2997
+ aria-label="Scroll left"
2998
+ disabled
2999
+ >
3000
+ <span class="pf-v6-c-button__icon">
3001
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3002
+ </span>
3003
+ </button>
3004
+ </div>
3005
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3006
+ <li class="pf-v6-c-tabs__item" role="presentation">
3007
+ <button
3008
+ type="button"
3009
+ class="pf-v6-c-tabs__link"
3010
+ role="tab"
3011
+ id="nav-tabs-users-link"
3012
+ >
3013
+ <span class="pf-v6-c-tabs__item-text">Users</span>
3014
+ </button>
3015
+ </li>
3016
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3017
+ <button
3018
+ type="button"
3019
+ class="pf-v6-c-tabs__link"
3020
+ role="tab"
3021
+ id="nav-tabs-containers-link"
3022
+ >
3023
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
3024
+ </button>
3025
+ </li>
3026
+ <li class="pf-v6-c-tabs__item" role="presentation">
3027
+ <button
3028
+ type="button"
3029
+ class="pf-v6-c-tabs__link"
3030
+ role="tab"
3031
+ id="nav-tabs-database-link"
3032
+ >
3033
+ <span class="pf-v6-c-tabs__item-text">Database</span>
3034
+ </button>
3035
+ </li>
3036
+
3037
+ <li class="pf-v6-c-tabs__item" role="presentation">
3038
+ <button
3039
+ type="button"
3040
+ class="pf-v6-c-tabs__link"
3041
+ role="tab"
3042
+ id="nav-tabs-server-link"
3043
+ >
3044
+ <span class="pf-v6-c-tabs__item-text">Server</span>
3045
+ </button>
3046
+ </li>
3047
+ <li class="pf-v6-c-tabs__item" role="presentation">
3048
+ <button
3049
+ type="button"
3050
+ class="pf-v6-c-tabs__link"
3051
+ role="tab"
3052
+ id="nav-tabs-system-link"
3053
+ >
3054
+ <span class="pf-v6-c-tabs__item-text">System</span>
3055
+ </button>
3056
+ </li>
3057
+ <li class="pf-v6-c-tabs__item" role="presentation">
3058
+ <button
3059
+ type="button"
3060
+ class="pf-v6-c-tabs__link"
3061
+ role="tab"
3062
+ id="nav-tabs-network-wired-link"
3063
+ >
3064
+ <span class="pf-v6-c-tabs__item-text">Network</span>
3065
+ </button>
3066
+ </li>
3067
+ </ul>
3068
+
3069
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3070
+ <button
3071
+ class="pf-v6-c-button pf-m-plain"
3072
+ type="button"
3073
+ aria-label="Scroll right"
3074
+ disabled
3075
+ >
3076
+ <span class="pf-v6-c-button__icon">
3077
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3078
+ </span>
3079
+ </button>
3080
+ </div>
3081
+ </div><br/ >
3082
+ As sub navigation:
3083
+ <div class="pf-v6-c-tabs pf-m-subtab pf-m-nav" role="region" id="nav-tabs">
3084
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3085
+ <button
3086
+ class="pf-v6-c-button pf-m-plain"
3087
+ type="button"
3088
+ aria-label="Scroll left"
3089
+ disabled
3090
+ >
3091
+ <span class="pf-v6-c-button__icon">
3092
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3093
+ </span>
3094
+ </button>
3095
+ </div>
3096
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3097
+ <li class="pf-v6-c-tabs__item" role="presentation">
3098
+ <button
3099
+ type="button"
3100
+ class="pf-v6-c-tabs__link"
3101
+ role="tab"
3102
+ id="nav-tabs-users-link"
3103
+ >
3104
+ <span class="pf-v6-c-tabs__item-text">Users</span>
3105
+ </button>
3106
+ </li>
3107
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3108
+ <button
3109
+ type="button"
3110
+ class="pf-v6-c-tabs__link"
3111
+ role="tab"
3112
+ id="nav-tabs-containers-link"
3113
+ >
3114
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
3115
+ </button>
3116
+ </li>
3117
+ <li class="pf-v6-c-tabs__item" role="presentation">
3118
+ <button
3119
+ type="button"
3120
+ class="pf-v6-c-tabs__link"
3121
+ role="tab"
3122
+ id="nav-tabs-database-link"
3123
+ >
3124
+ <span class="pf-v6-c-tabs__item-text">Database</span>
3125
+ </button>
3126
+ </li>
3127
+
3128
+ <li class="pf-v6-c-tabs__item" role="presentation">
3129
+ <button
3130
+ type="button"
3131
+ class="pf-v6-c-tabs__link"
3132
+ role="tab"
3133
+ id="nav-tabs-server-link"
3134
+ >
3135
+ <span class="pf-v6-c-tabs__item-text">Server</span>
3136
+ </button>
3137
+ </li>
3138
+ <li class="pf-v6-c-tabs__item" role="presentation">
3139
+ <button
3140
+ type="button"
3141
+ class="pf-v6-c-tabs__link"
3142
+ role="tab"
3143
+ id="nav-tabs-system-link"
3144
+ >
3145
+ <span class="pf-v6-c-tabs__item-text">System</span>
3146
+ </button>
3147
+ </li>
3148
+ <li class="pf-v6-c-tabs__item" role="presentation">
3149
+ <button
3150
+ type="button"
3151
+ class="pf-v6-c-tabs__link"
3152
+ role="tab"
3153
+ id="nav-tabs-network-wired-link"
3154
+ >
3155
+ <span class="pf-v6-c-tabs__item-text">Network</span>
3156
+ </button>
3157
+ </li>
3158
+ </ul>
3159
+
3160
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3161
+ <button
3162
+ class="pf-v6-c-button pf-m-plain"
3163
+ type="button"
3164
+ aria-label="Scroll right"
3165
+ disabled
3166
+ >
3167
+ <span class="pf-v6-c-button__icon">
3168
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3169
+ </span>
3170
+ </button>
3171
+ </div>
3172
+ </div>
3173
+
3174
+ ```
3175
+
2989
3176
  ## Tab item actions
2990
3177
 
2991
3178
  ### Help button example
@@ -10475,6 +10662,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
10475
10662
  | `.pf-m-initializing-accent` | `.pf-v6-c-tabs.pf-m-animate-current` | Modifies tabs styles while initializing the "current" tab's accent styles. |
10476
10663
  | `--pf-v6-c-tabs--link-accent--start` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the "start" inset of the current tab's accent. |
10477
10664
  | `--pf-v6-c-tabs--link-accent--length` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the length of the current tab's accent. |
10665
+ | `.pf-m-nav` | `.pf-v6-c-tabs` | Applies site navigation styling to the tab component. |
10478
10666
  | `.pf-m-current` | `.pf-v6-c-tabs__item` | Indicates that a tab item is currently selected. |
10479
10667
  | `.pf-m-action` | `.pf-v6-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
10480
10668
  | `.pf-m-overflow` | `.pf-v6-c-tabs__item` | Applies overflow menu styling to a tab item. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.7",
4
+ "version": "6.5.0-prerelease.9",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -55,11 +55,57 @@
55
55
  --pf-t--global--duration--200: 1ms !important;
56
56
  --pf-t--global--duration--100: 1ms !important;
57
57
  --pf-t--global--duration--50: 1ms !important;
58
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
58
59
  }
59
60
 
61
+ .pf-v6-m-ai-indicator {
62
+ position: relative;
63
+ }
64
+ .pf-v6-m-ai-indicator::before {
65
+ position: absolute;
66
+ inset: 0;
67
+ pointer-events: none;
68
+ content: "";
69
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
70
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
71
+ border-radius: inherit;
72
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
73
+ mask-composite: exclude;
74
+ }
75
+
76
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
77
+ syntax: "<length>";
78
+ initial-value: 0;
79
+ inherits: false;
80
+ }
81
+ .pf-v6-m-thinking {
82
+ box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
83
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
84
+ }
85
+ .pf-v6-m-thinking.pf-m-inset {
86
+ box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
87
+ }
88
+
89
+ @keyframes pf-v6-global-thinking {
90
+ 50% {
91
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
92
+ }
93
+ }
60
94
  :root {
61
95
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
62
96
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
97
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
98
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
99
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
100
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
101
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
102
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
103
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
104
+ }
105
+ @media screen and (prefers-reduced-motion: no-preference) {
106
+ :root {
107
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
108
+ }
63
109
  }
64
110
 
65
111
  @property --pf-v6-global--danger-jiggle--TranslateX {
package/patternfly-base.css CHANGED
@@ -195,11 +195,57 @@ button) {
195
195
  --pf-t--global--duration--200: 1ms !important;
196
196
  --pf-t--global--duration--100: 1ms !important;
197
197
  --pf-t--global--duration--50: 1ms !important;
198
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
198
199
  }
199
200
 
201
+ .pf-v6-m-ai-indicator {
202
+ position: relative;
203
+ }
204
+ .pf-v6-m-ai-indicator::before {
205
+ position: absolute;
206
+ inset: 0;
207
+ pointer-events: none;
208
+ content: "";
209
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
210
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
211
+ border-radius: inherit;
212
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
213
+ mask-composite: exclude;
214
+ }
215
+
216
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
217
+ syntax: "<length>";
218
+ initial-value: 0;
219
+ inherits: false;
220
+ }
221
+ .pf-v6-m-thinking {
222
+ box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
223
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
224
+ }
225
+ .pf-v6-m-thinking.pf-m-inset {
226
+ box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
227
+ }
228
+
229
+ @keyframes pf-v6-global-thinking {
230
+ 50% {
231
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
232
+ }
233
+ }
200
234
  :root {
201
235
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
202
236
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
237
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
238
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
239
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
240
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
241
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
242
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
243
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
244
+ }
245
+ @media screen and (prefers-reduced-motion: no-preference) {
246
+ :root {
247
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
248
+ }
203
249
  }
204
250
 
205
251
  @property --pf-v6-global--danger-jiggle--TranslateX {
package/patternfly-no-globals.css CHANGED
@@ -56,11 +56,57 @@
56
56
  --pf-t--global--duration--200: 1ms !important;
57
57
  --pf-t--global--duration--100: 1ms !important;
58
58
  --pf-t--global--duration--50: 1ms !important;
59
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
59
60
  }
60
61
 
62
+ .pf-v6-m-ai-indicator {
63
+ position: relative;
64
+ }
65
+ .pf-v6-m-ai-indicator::before {
66
+ position: absolute;
67
+ inset: 0;
68
+ pointer-events: none;
69
+ content: "";
70
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
71
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
72
+ border-radius: inherit;
73
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
74
+ mask-composite: exclude;
75
+ }
76
+
77
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
78
+ syntax: "<length>";
79
+ initial-value: 0;
80
+ inherits: false;
81
+ }
82
+ .pf-v6-m-thinking {
83
+ box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
84
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
85
+ }
86
+ .pf-v6-m-thinking.pf-m-inset {
87
+ box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
88
+ }
89
+
90
+ @keyframes pf-v6-global-thinking {
91
+ 50% {
92
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
93
+ }
94
+ }
61
95
  :root {
62
96
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
63
97
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
98
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
99
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
100
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
101
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
102
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
103
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
104
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
105
+ }
106
+ @media screen and (prefers-reduced-motion: no-preference) {
107
+ :root {
108
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
109
+ }
64
110
  }
65
111
 
66
112
  @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -12848,7 +12894,8 @@ ul) {
12848
12894
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
12849
12895
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12850
12896
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
12851
- --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
12897
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12898
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
12852
12899
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12853
12900
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
12854
12901
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -13003,6 +13050,9 @@ ul) {
13003
13050
  .pf-v6-c-data-list.pf-m-drag-over {
13004
13051
  overflow-anchor: none;
13005
13052
  }
13053
+ .pf-v6-c-data-list.pf-m-plain {
13054
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13055
+ }
13006
13056
 
13007
13057
  .pf-v6-c-data-list.pf-m-truncate,
13008
13058
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -28361,6 +28411,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28361
28411
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28362
28412
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
28363
28413
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
28414
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
28415
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
28364
28416
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
28365
28417
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
28366
28418
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -28638,6 +28690,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28638
28690
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
28639
28691
  overflow: visible;
28640
28692
  }
28693
+ .pf-v6-c-tabs.pf-m-nav {
28694
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
28695
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
28696
+ --pf-v6-c-tabs__link--hover--BorderColor: transparent;
28697
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
28698
+ }
28699
+ .pf-v6-c-tabs.pf-m-nav::before,
28700
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
28701
+ border: 0;
28702
+ }
28641
28703
 
28642
28704
  .pf-v6-c-tabs__toggle {
28643
28705
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -28687,7 +28749,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28687
28749
  }
28688
28750
  .pf-v6-c-tabs__item.pf-m-current {
28689
28751
  --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
28690
- --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
28752
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
28691
28753
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
28692
28754
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
28693
28755
  }
package/patternfly.css CHANGED
@@ -196,11 +196,57 @@ button) {
196
196
  --pf-t--global--duration--200: 1ms !important;
197
197
  --pf-t--global--duration--100: 1ms !important;
198
198
  --pf-t--global--duration--50: 1ms !important;
199
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
199
200
  }
200
201
 
202
+ .pf-v6-m-ai-indicator {
203
+ position: relative;
204
+ }
205
+ .pf-v6-m-ai-indicator::before {
206
+ position: absolute;
207
+ inset: 0;
208
+ pointer-events: none;
209
+ content: "";
210
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
211
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
212
+ border-radius: inherit;
213
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
214
+ mask-composite: exclude;
215
+ }
216
+
217
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
218
+ syntax: "<length>";
219
+ initial-value: 0;
220
+ inherits: false;
221
+ }
222
+ .pf-v6-m-thinking {
223
+ box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
224
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
225
+ }
226
+ .pf-v6-m-thinking.pf-m-inset {
227
+ box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
228
+ }
229
+
230
+ @keyframes pf-v6-global-thinking {
231
+ 50% {
232
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
233
+ }
234
+ }
201
235
  :root {
202
236
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
203
237
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
238
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
239
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
240
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
241
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
242
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
243
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
244
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
245
+ }
246
+ @media screen and (prefers-reduced-motion: no-preference) {
247
+ :root {
248
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
249
+ }
204
250
  }
205
251
 
206
252
  @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -12988,7 +13034,8 @@ ul) {
12988
13034
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
12989
13035
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12990
13036
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
12991
- --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
13037
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13038
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
12992
13039
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12993
13040
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
12994
13041
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -13143,6 +13190,9 @@ ul) {
13143
13190
  .pf-v6-c-data-list.pf-m-drag-over {
13144
13191
  overflow-anchor: none;
13145
13192
  }
13193
+ .pf-v6-c-data-list.pf-m-plain {
13194
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13195
+ }
13146
13196
 
13147
13197
  .pf-v6-c-data-list.pf-m-truncate,
13148
13198
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -28501,6 +28551,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28501
28551
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28502
28552
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
28503
28553
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
28554
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
28555
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
28504
28556
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
28505
28557
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
28506
28558
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -28778,6 +28830,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28778
28830
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
28779
28831
  overflow: visible;
28780
28832
  }
28833
+ .pf-v6-c-tabs.pf-m-nav {
28834
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
28835
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
28836
+ --pf-v6-c-tabs__link--hover--BorderColor: transparent;
28837
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
28838
+ }
28839
+ .pf-v6-c-tabs.pf-m-nav::before,
28840
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
28841
+ border: 0;
28842
+ }
28781
28843
 
28782
28844
  .pf-v6-c-tabs__toggle {
28783
28845
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -28827,7 +28889,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28827
28889
  }
28828
28890
  .pf-v6-c-tabs__item.pf-m-current {
28829
28891
  --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
28830
- --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
28892
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
28831
28893
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
28832
28894
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
28833
28895
  }