@patternfly/react-templates 6.2.1-prerelease.1 → 6.2.1-prerelease.2

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/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.2.1-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.2.1-prerelease.1...@patternfly/react-templates@6.2.1-prerelease.2) (2025-04-10)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-templates
9
+
6
10
  ## [6.2.1-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.2.1-prerelease.0...@patternfly/react-templates@6.2.1-prerelease.1) (2025-04-08)
7
11
 
8
12
  **Note:** Version bump only for package @patternfly/react-templates
@@ -1 +1 @@
1
- {"name":"@patternfly/react-templates-components","main":"../dist/js/components/index.js","module":"../dist/esm/components/index.js","typings":"../dist/esm/components/index.d.ts","version":"6.2.1-prerelease.0","private":true}
1
+ {"name":"@patternfly/react-templates-components","main":"../dist/js/components/index.js","module":"../dist/esm/components/index.js","typings":"../dist/esm/components/index.d.ts","version":"6.2.1-prerelease.1","private":true}
@@ -1 +1 @@
1
- {"name":"@patternfly/react-templates-dropdown-dynamic","main":"../../../js/components/Dropdown/index.js","module":"../../../esm/components/Dropdown/index.js","typings":"../../../esm/components/Dropdown/index.d.ts","version":"6.2.1-prerelease.0","private":true}
1
+ {"name":"@patternfly/react-templates-dropdown-dynamic","main":"../../../js/components/Dropdown/index.js","module":"../../../esm/components/Dropdown/index.js","typings":"../../../esm/components/Dropdown/index.d.ts","version":"6.2.1-prerelease.1","private":true}
@@ -1 +1 @@
1
- {"name":"@patternfly/react-templates-select-dynamic","main":"../../../js/components/Select/index.js","module":"../../../esm/components/Select/index.js","typings":"../../../esm/components/Select/index.d.ts","version":"6.2.1-prerelease.0","private":true}
1
+ {"name":"@patternfly/react-templates-select-dynamic","main":"../../../js/components/Select/index.js","module":"../../../esm/components/Select/index.js","typings":"../../../esm/components/Select/index.d.ts","version":"6.2.1-prerelease.1","private":true}
@@ -222,6 +222,161 @@
222
222
  display: flex;
223
223
  }
224
224
 
225
+ .pf-v6-c-check {
226
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
227
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
228
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
229
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
230
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
231
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
232
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
233
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
234
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
235
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
236
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
237
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
238
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
239
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
240
+ }
241
+
242
+ .pf-v6-c-check {
243
+ display: grid;
244
+ grid-template-columns: auto 1fr;
245
+ grid-gap: var(--pf-v6-c-check--GridGap);
246
+ accent-color: var(--pf-v6-c-check--AccentColor);
247
+ }
248
+
249
+ .pf-v6-c-check.pf-m-standalone {
250
+ display: inline-grid;
251
+ grid-template-columns: auto;
252
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
253
+ }
254
+
255
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
256
+ align-self: center;
257
+ transform: none;
258
+ }
259
+
260
+ .pf-v6-c-check__input {
261
+ align-self: start;
262
+ font-size: var(--pf-v6-c-check__label--FontSize);
263
+ line-height: var(--pf-v6-c-check__label--LineHeight);
264
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
265
+ }
266
+
267
+ .pf-v6-c-check__label {
268
+ font-size: var(--pf-v6-c-check__label--FontSize);
269
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
270
+ line-height: var(--pf-v6-c-check__label--LineHeight);
271
+ color: var(--pf-v6-c-check__label--Color);
272
+ }
273
+
274
+ .pf-v6-c-check__description {
275
+ grid-column: 2;
276
+ font-size: var(--pf-v6-c-check__description--FontSize);
277
+ color: var(--pf-v6-c-check__description--Color);
278
+ }
279
+
280
+ .pf-v6-c-check__body {
281
+ grid-column: 2;
282
+ }
283
+
284
+ .pf-v6-c-check__label,
285
+ .pf-v6-c-check__input {
286
+ justify-self: start;
287
+ }
288
+
289
+ label.pf-v6-c-check, .pf-v6-c-check__label,
290
+ .pf-v6-c-check__input {
291
+ cursor: pointer;
292
+ }
293
+
294
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
295
+ .pf-v6-c-check__input:disabled,
296
+ .pf-v6-c-check__input.pf-m-disabled {
297
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
298
+ cursor: not-allowed;
299
+ }
300
+
301
+ .pf-v6-c-check__label-required {
302
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
303
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
304
+ color: var(--pf-v6-c-check__label-required--Color);
305
+ }
306
+
307
+ .pf-v6-c-badge {
308
+ --pf-v6-c-badge--BorderColor: transparent;
309
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
310
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
311
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
312
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
313
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
314
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
315
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
316
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
317
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
318
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
319
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
320
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
321
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
322
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
323
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
324
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
325
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
326
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
327
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
328
+ }
329
+
330
+ .pf-v6-c-badge {
331
+ position: relative;
332
+ display: inline-block;
333
+ min-width: var(--pf-v6-c-badge--MinWidth);
334
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
335
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
336
+ font-size: var(--pf-v6-c-badge--FontSize);
337
+ font-weight: var(--pf-v6-c-badge--FontWeight);
338
+ color: var(--pf-v6-c-badge--Color);
339
+ text-align: center;
340
+ white-space: nowrap;
341
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
342
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
343
+ }
344
+
345
+ .pf-v6-c-badge::after {
346
+ position: absolute;
347
+ inset: 0;
348
+ pointer-events: none;
349
+ content: "";
350
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
351
+ border-radius: inherit;
352
+ }
353
+
354
+ .pf-v6-c-badge.pf-m-read {
355
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
356
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
357
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
358
+ }
359
+
360
+ .pf-v6-c-badge.pf-m-unread {
361
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
362
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
363
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
364
+ }
365
+
366
+ .pf-v6-c-badge.pf-m-disabled {
367
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
368
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
369
+ }
370
+
371
+ .pf-v6-c-badge.pf-m-disabled::after {
372
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
373
+ }
374
+
375
+ .pf-v6-c-badge__toggle-icon {
376
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
377
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
378
+ }
379
+
225
380
  .pf-v6-c-label {
226
381
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
227
382
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -755,161 +910,6 @@ input.pf-v6-c-label__content {
755
910
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
756
911
  }
757
912
 
758
- .pf-v6-c-badge {
759
- --pf-v6-c-badge--BorderColor: transparent;
760
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
761
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
762
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
763
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
764
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
765
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
766
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
767
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
768
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
769
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
770
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
771
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
772
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
773
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
774
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
775
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
776
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
777
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
778
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
779
- }
780
-
781
- .pf-v6-c-badge {
782
- position: relative;
783
- display: inline-block;
784
- min-width: var(--pf-v6-c-badge--MinWidth);
785
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
786
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
787
- font-size: var(--pf-v6-c-badge--FontSize);
788
- font-weight: var(--pf-v6-c-badge--FontWeight);
789
- color: var(--pf-v6-c-badge--Color);
790
- text-align: center;
791
- white-space: nowrap;
792
- background-color: var(--pf-v6-c-badge--BackgroundColor);
793
- border-radius: var(--pf-v6-c-badge--BorderRadius);
794
- }
795
-
796
- .pf-v6-c-badge::after {
797
- position: absolute;
798
- inset: 0;
799
- pointer-events: none;
800
- content: "";
801
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
802
- border-radius: inherit;
803
- }
804
-
805
- .pf-v6-c-badge.pf-m-read {
806
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
807
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
808
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
809
- }
810
-
811
- .pf-v6-c-badge.pf-m-unread {
812
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
813
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
814
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
815
- }
816
-
817
- .pf-v6-c-badge.pf-m-disabled {
818
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
819
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
820
- }
821
-
822
- .pf-v6-c-badge.pf-m-disabled::after {
823
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
824
- }
825
-
826
- .pf-v6-c-badge__toggle-icon {
827
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
828
- color: var(--pf-v6-c-badge__toggle-icon--Color);
829
- }
830
-
831
- .pf-v6-c-check {
832
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
833
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
834
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
835
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
836
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
837
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
838
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
839
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
840
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
841
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
842
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
843
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
844
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
845
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
846
- }
847
-
848
- .pf-v6-c-check {
849
- display: grid;
850
- grid-template-columns: auto 1fr;
851
- grid-gap: var(--pf-v6-c-check--GridGap);
852
- accent-color: var(--pf-v6-c-check--AccentColor);
853
- }
854
-
855
- .pf-v6-c-check.pf-m-standalone {
856
- display: inline-grid;
857
- grid-template-columns: auto;
858
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
859
- }
860
-
861
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
862
- align-self: center;
863
- transform: none;
864
- }
865
-
866
- .pf-v6-c-check__input {
867
- align-self: start;
868
- font-size: var(--pf-v6-c-check__label--FontSize);
869
- line-height: var(--pf-v6-c-check__label--LineHeight);
870
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
871
- }
872
-
873
- .pf-v6-c-check__label {
874
- font-size: var(--pf-v6-c-check__label--FontSize);
875
- font-weight: var(--pf-v6-c-check__label--FontWeight);
876
- line-height: var(--pf-v6-c-check__label--LineHeight);
877
- color: var(--pf-v6-c-check__label--Color);
878
- }
879
-
880
- .pf-v6-c-check__description {
881
- grid-column: 2;
882
- font-size: var(--pf-v6-c-check__description--FontSize);
883
- color: var(--pf-v6-c-check__description--Color);
884
- }
885
-
886
- .pf-v6-c-check__body {
887
- grid-column: 2;
888
- }
889
-
890
- .pf-v6-c-check__label,
891
- .pf-v6-c-check__input {
892
- justify-self: start;
893
- }
894
-
895
- label.pf-v6-c-check, .pf-v6-c-check__label,
896
- .pf-v6-c-check__input {
897
- cursor: pointer;
898
- }
899
-
900
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
901
- .pf-v6-c-check__input:disabled,
902
- .pf-v6-c-check__input.pf-m-disabled {
903
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
904
- cursor: not-allowed;
905
- }
906
-
907
- .pf-v6-c-check__label-required {
908
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
909
- font-size: var(--pf-v6-c-check__label-required--FontSize);
910
- color: var(--pf-v6-c-check__label-required--Color);
911
- }
912
-
913
913
  .pf-v6-c-menu-toggle {
914
914
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
915
915
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -1430,6 +1430,162 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1430
1430
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1431
1431
  }
1432
1432
 
1433
+ .pf-v6-c-label-group {
1434
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1435
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1436
+ --pf-v6-c-label-group--MaxWidth: 100%;
1437
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1438
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1439
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1440
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1441
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1442
+ --pf-v6-c-label-group__main--MinWidth: 0;
1443
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1444
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1445
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1446
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1447
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1448
+ --pf-v6-c-label-group__list--MinWidth: 0;
1449
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1450
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1451
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1452
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1453
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1454
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1455
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1456
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1457
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1458
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1459
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1460
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1461
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1462
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1463
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1464
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1465
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1466
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1467
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1468
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1469
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1470
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1471
+ }
1472
+
1473
+ .pf-v6-c-label-group {
1474
+ display: inline-flex;
1475
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1476
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1477
+ align-items: center;
1478
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1479
+ }
1480
+
1481
+ .pf-v6-c-label-group.pf-m-category {
1482
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1483
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1484
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1485
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1486
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1487
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1488
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1489
+ }
1490
+
1491
+ .pf-v6-c-label-group.pf-m-vertical {
1492
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1493
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1494
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1495
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1496
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1497
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1498
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1499
+ }
1500
+
1501
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1502
+ align-items: flex-start;
1503
+ }
1504
+
1505
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1506
+ flex-direction: column;
1507
+ align-items: flex-start;
1508
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1509
+ }
1510
+
1511
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1512
+ flex-direction: column;
1513
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1514
+ }
1515
+
1516
+ .pf-v6-c-label-group.pf-m-editable,
1517
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1518
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1519
+ display: flex;
1520
+ }
1521
+
1522
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1523
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1524
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1525
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1526
+ flex: 1;
1527
+ }
1528
+
1529
+ .pf-v6-c-label-group__main {
1530
+ display: flex;
1531
+ flex: 1;
1532
+ flex-wrap: wrap;
1533
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1534
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1535
+ align-items: baseline;
1536
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1537
+ }
1538
+
1539
+ .pf-v6-c-label-group__list {
1540
+ display: inline-flex;
1541
+ flex-wrap: wrap;
1542
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1543
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1544
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1545
+ }
1546
+
1547
+ .pf-v6-c-label-group__list-item {
1548
+ display: inline-flex;
1549
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1550
+ }
1551
+
1552
+ .pf-v6-c-label-group__label {
1553
+ overflow: hidden;
1554
+ text-overflow: ellipsis;
1555
+ white-space: nowrap;
1556
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1557
+ }
1558
+
1559
+ .pf-v6-c-label-group__close {
1560
+ display: flex;
1561
+ align-self: flex-start;
1562
+ }
1563
+
1564
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1565
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1566
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1567
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1568
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1569
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1570
+ }
1571
+
1572
+ .pf-v6-c-label-group__textarea {
1573
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1574
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1575
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1576
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1577
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1578
+ white-space: nowrap;
1579
+ resize: none;
1580
+ border: 0;
1581
+ -ms-overflow-style: none;
1582
+ scrollbar-width: none;
1583
+ }
1584
+
1585
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1586
+ display: none;
1587
+ }
1588
+
1433
1589
  .pf-v6-c-divider {
1434
1590
  --pf-v6-c-divider--Display: flex;
1435
1591
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
@@ -1722,186 +1878,30 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1722
1878
  }
1723
1879
  @media (min-width: 90.625rem) {
1724
1880
  .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1725
- --pf-v6-c-divider--before--FlexBasis: 100%;
1726
- }
1727
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1728
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1729
- }
1730
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1731
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1732
- }
1733
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1734
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1735
- }
1736
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1737
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1738
- }
1739
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1740
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1741
- }
1742
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1743
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1744
- }
1745
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1746
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1747
- }
1748
- }
1749
- .pf-v6-c-label-group {
1750
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1751
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1752
- --pf-v6-c-label-group--MaxWidth: 100%;
1753
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1754
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1755
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1756
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1757
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1758
- --pf-v6-c-label-group__main--MinWidth: 0;
1759
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1760
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1761
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1762
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1763
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1764
- --pf-v6-c-label-group__list--MinWidth: 0;
1765
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1766
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1767
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1768
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1769
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1770
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1771
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1772
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1773
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1774
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1775
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1776
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1777
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1778
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1779
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1780
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1781
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1782
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1783
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1784
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1785
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1786
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1787
- }
1788
-
1789
- .pf-v6-c-label-group {
1790
- display: inline-flex;
1791
- row-gap: var(--pf-v6-c-label-group--RowGap);
1792
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1793
- align-items: center;
1794
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1795
- }
1796
-
1797
- .pf-v6-c-label-group.pf-m-category {
1798
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1799
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1800
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1801
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1802
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1803
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1804
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1805
- }
1806
-
1807
- .pf-v6-c-label-group.pf-m-vertical {
1808
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1809
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1810
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1811
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1812
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1813
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1814
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1815
- }
1816
-
1817
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1818
- align-items: flex-start;
1819
- }
1820
-
1821
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1822
- flex-direction: column;
1823
- align-items: flex-start;
1824
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1825
- }
1826
-
1827
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1828
- flex-direction: column;
1829
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1830
- }
1831
-
1832
- .pf-v6-c-label-group.pf-m-editable,
1833
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1834
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1835
- display: flex;
1836
- }
1837
-
1838
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1839
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1840
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1841
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1842
- flex: 1;
1843
- }
1844
-
1845
- .pf-v6-c-label-group__main {
1846
- display: flex;
1847
- flex: 1;
1848
- flex-wrap: wrap;
1849
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1850
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1851
- align-items: baseline;
1852
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1853
- }
1854
-
1855
- .pf-v6-c-label-group__list {
1856
- display: inline-flex;
1857
- flex-wrap: wrap;
1858
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1859
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1860
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1861
- }
1862
-
1863
- .pf-v6-c-label-group__list-item {
1864
- display: inline-flex;
1865
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1866
- }
1867
-
1868
- .pf-v6-c-label-group__label {
1869
- overflow: hidden;
1870
- text-overflow: ellipsis;
1871
- white-space: nowrap;
1872
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1873
- }
1874
-
1875
- .pf-v6-c-label-group__close {
1876
- display: flex;
1877
- align-self: flex-start;
1878
- }
1879
-
1880
- .pf-v6-c-label-group__close .pf-v6-c-button {
1881
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1882
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1883
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1884
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1885
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1886
- }
1887
-
1888
- .pf-v6-c-label-group__textarea {
1889
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1890
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1891
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1892
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1893
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1894
- white-space: nowrap;
1895
- resize: none;
1896
- border: 0;
1897
- -ms-overflow-style: none;
1898
- scrollbar-width: none;
1899
- }
1900
-
1901
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1902
- display: none;
1881
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1882
+ }
1883
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1884
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1885
+ }
1886
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1887
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1888
+ }
1889
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1890
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1891
+ }
1892
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1893
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1894
+ }
1895
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1896
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1897
+ }
1898
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1899
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1900
+ }
1901
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1902
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1903
+ }
1903
1904
  }
1904
-
1905
1905
  .pf-v6-c-button {
1906
1906
  --pf-v6-c-button--Display: inline-flex;
1907
1907
  --pf-v6-c-button--AlignItems: baseline;
@@ -2614,6 +2614,122 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2614
2614
  transform: scale(1.5);
2615
2615
  }
2616
2616
  }
2617
+ .pf-v6-c-breadcrumb {
2618
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2619
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2620
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2621
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2622
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2623
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2624
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2625
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2626
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2627
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2628
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2629
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2630
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2631
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2632
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2633
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2634
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2635
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2636
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2637
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2638
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2639
+ }
2640
+
2641
+ .pf-v6-c-breadcrumb {
2642
+ display: inline-flex;
2643
+ }
2644
+
2645
+ .pf-v6-c-breadcrumb__list {
2646
+ display: flex;
2647
+ flex-wrap: wrap;
2648
+ align-items: center;
2649
+ }
2650
+
2651
+ .pf-v6-c-breadcrumb__item {
2652
+ display: flex;
2653
+ align-items: baseline;
2654
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2655
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2656
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2657
+ white-space: nowrap;
2658
+ list-style: none;
2659
+ }
2660
+
2661
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2662
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2663
+ }
2664
+
2665
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
2666
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2667
+ }
2668
+
2669
+ .pf-v6-c-breadcrumb__item-divider {
2670
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2671
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2672
+ line-height: 1;
2673
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2674
+ }
2675
+
2676
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2677
+ scale: -1 1;
2678
+ }
2679
+
2680
+ .pf-v6-c-breadcrumb__link {
2681
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2682
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2683
+ font-size: inherit;
2684
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2685
+ line-height: inherit;
2686
+ color: var(--pf-v6-c-breadcrumb__link--Color);
2687
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2688
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2689
+ word-break: break-word;
2690
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2691
+ }
2692
+
2693
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2694
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2695
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2696
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2697
+ }
2698
+
2699
+ .pf-v6-c-breadcrumb__link.pf-m-current {
2700
+ cursor: default;
2701
+ }
2702
+
2703
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2704
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2705
+ text-decoration-line: none;
2706
+ }
2707
+
2708
+ button.pf-v6-c-breadcrumb__link {
2709
+ border: none;
2710
+ }
2711
+
2712
+ .pf-v6-c-breadcrumb__dropdown {
2713
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2714
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2715
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2716
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2717
+ }
2718
+
2719
+ .pf-v6-c-breadcrumb__heading {
2720
+ display: inline;
2721
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2722
+ }
2723
+
2724
+ .pf-v6-c-breadcrumb__link,
2725
+ .pf-v6-c-breadcrumb__heading {
2726
+ white-space: normal;
2727
+ }
2728
+
2729
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2730
+ display: none;
2731
+ }
2732
+
2617
2733
  .pf-v6-c-menu {
2618
2734
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2619
2735
  --pf-v6-c-menu--Width: auto;
@@ -3260,122 +3376,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3260
3376
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3261
3377
  }
3262
3378
 
3263
- .pf-v6-c-breadcrumb {
3264
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3265
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3266
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3267
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3268
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3269
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3270
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3271
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3272
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3273
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3274
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3275
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3276
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3277
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3278
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3279
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3280
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3281
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3282
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3283
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3284
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3285
- }
3286
-
3287
- .pf-v6-c-breadcrumb {
3288
- display: inline-flex;
3289
- }
3290
-
3291
- .pf-v6-c-breadcrumb__list {
3292
- display: flex;
3293
- flex-wrap: wrap;
3294
- align-items: center;
3295
- }
3296
-
3297
- .pf-v6-c-breadcrumb__item {
3298
- display: flex;
3299
- align-items: baseline;
3300
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3301
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3302
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3303
- white-space: nowrap;
3304
- list-style: none;
3305
- }
3306
-
3307
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3308
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3309
- }
3310
-
3311
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3312
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3313
- }
3314
-
3315
- .pf-v6-c-breadcrumb__item-divider {
3316
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3317
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3318
- line-height: 1;
3319
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3320
- }
3321
-
3322
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3323
- scale: -1 1;
3324
- }
3325
-
3326
- .pf-v6-c-breadcrumb__link {
3327
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3328
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3329
- font-size: inherit;
3330
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3331
- line-height: inherit;
3332
- color: var(--pf-v6-c-breadcrumb__link--Color);
3333
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3334
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3335
- word-break: break-word;
3336
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3337
- }
3338
-
3339
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3340
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3341
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3342
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3343
- }
3344
-
3345
- .pf-v6-c-breadcrumb__link.pf-m-current {
3346
- cursor: default;
3347
- }
3348
-
3349
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3350
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3351
- text-decoration-line: none;
3352
- }
3353
-
3354
- button.pf-v6-c-breadcrumb__link {
3355
- border: none;
3356
- }
3357
-
3358
- .pf-v6-c-breadcrumb__dropdown {
3359
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3360
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3361
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3362
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3363
- }
3364
-
3365
- .pf-v6-c-breadcrumb__heading {
3366
- display: inline;
3367
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3368
- }
3369
-
3370
- .pf-v6-c-breadcrumb__link,
3371
- .pf-v6-c-breadcrumb__heading {
3372
- white-space: normal;
3373
- }
3374
-
3375
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3376
- display: none;
3377
- }
3378
-
3379
3379
  .pf-v6-c-spinner {
3380
3380
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3381
3381
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-templates",
3
- "version": "6.2.1-prerelease.1",
3
+ "version": "6.2.1-prerelease.2",
4
4
  "description": "This package provides wrapped component demos for ease of use\n",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -33,7 +33,7 @@
33
33
  "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
34
34
  },
35
35
  "dependencies": {
36
- "@patternfly/react-core": "^6.2.1-prerelease.1",
36
+ "@patternfly/react-core": "^6.2.1-prerelease.2",
37
37
  "@patternfly/react-icons": "^6.2.0",
38
38
  "@patternfly/react-styles": "^6.2.0",
39
39
  "@patternfly/react-tokens": "^6.2.0",
@@ -43,5 +43,5 @@
43
43
  "react": "^17 || ^18",
44
44
  "react-dom": "^17 || ^18"
45
45
  },
46
- "gitHead": "67083921690cf0fb228cc2cb5045a914f636706f"
46
+ "gitHead": "25558ac94b9f9f031dbc18cb7424c0f1666097d9"
47
47
  }