@patternfly/react-templates 6.4.1-prerelease.5 → 6.4.1-prerelease.6

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.
@@ -321,1184 +321,1584 @@
321
321
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
322
322
  }
323
323
  }
324
- .pf-v6-c-menu-toggle {
325
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
326
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
327
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
328
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
329
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
330
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
331
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
332
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
333
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
334
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
335
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
336
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
337
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
338
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
339
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
340
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
341
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
342
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
343
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
344
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
345
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
346
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
347
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
348
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
349
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
350
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
351
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
352
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
353
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
354
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
355
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
356
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
357
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
358
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
359
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
360
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
361
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
362
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
363
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
364
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
365
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
366
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
367
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
368
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
369
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
370
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
371
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
372
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
373
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
374
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
375
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
376
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
377
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
378
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
379
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
380
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
381
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
382
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
383
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
384
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
385
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
386
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
387
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
388
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
389
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
390
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
391
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
392
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
393
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
394
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
395
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
396
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
397
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
398
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
399
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
400
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
401
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
402
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
403
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
404
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
405
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
406
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
407
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
408
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
409
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
410
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
411
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
412
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
413
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
414
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
415
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
416
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
417
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
418
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
419
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
420
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
421
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
422
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
423
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
424
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
425
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
426
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
427
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
428
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
429
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
430
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
431
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
432
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
433
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
434
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
435
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
436
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
437
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
438
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
439
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
440
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
441
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
442
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
443
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
444
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
445
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
446
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
447
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
448
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
449
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
450
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
451
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
452
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
453
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
454
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
455
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
456
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
457
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
458
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
459
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
460
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
461
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
462
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
463
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
464
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
465
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
466
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
467
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
468
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
469
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
470
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
471
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
324
+ .pf-v6-c-label {
325
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
326
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
327
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
328
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
329
+ --pf-v6-c-label--MaxWidth: 100%;
330
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
331
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
332
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
333
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
334
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
335
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
336
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
337
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
338
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
339
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
340
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
341
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
342
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
343
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
344
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
345
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
346
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
347
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
348
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
349
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
350
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
351
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
352
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
353
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
354
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
355
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
356
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
357
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
358
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
359
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
360
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
361
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
362
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
363
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
364
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
365
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
366
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
367
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
368
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
369
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
370
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
371
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
372
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
373
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
374
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
375
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
376
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
377
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
378
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
379
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
380
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
381
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
382
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
383
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
384
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
385
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
386
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
387
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
388
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
389
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
390
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
391
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
392
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
393
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
394
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
395
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
396
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
397
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
398
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
399
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
400
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
401
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
402
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
403
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
404
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
405
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
406
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
407
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
408
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
409
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
410
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
411
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
412
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
413
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
414
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
415
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
416
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
417
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
418
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
419
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
420
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
421
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
422
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
423
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
424
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
425
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
426
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
427
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
428
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
429
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
430
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
431
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
432
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
433
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
434
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
435
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
436
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
437
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
438
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
439
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
440
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
441
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
442
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
443
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
444
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
445
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
446
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
447
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
448
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
449
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
450
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
451
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
452
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
453
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
454
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
455
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
456
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
457
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
458
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
459
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
460
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
461
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
462
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
463
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
464
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
465
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
466
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
467
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
468
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
469
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
470
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
471
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
472
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
473
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
474
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
475
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
476
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
477
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
478
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
479
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
480
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
481
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
482
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
483
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
484
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
485
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
486
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
487
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
488
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
489
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
490
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
491
+ --pf-v6-c-label__content--MaxWidth: 100%;
492
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
493
+ --pf-v6-c-label__content--Cursor: initial;
494
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
495
+ --pf-v6-c-label__text--MaxWidth: 100%;
496
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
497
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
498
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
499
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
500
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
501
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
502
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
503
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
504
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
505
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
506
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
507
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
508
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
509
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
510
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
511
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
512
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
513
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
514
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
515
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
516
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
517
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
518
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
519
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
520
+ }
521
+
522
+ .pf-v6-c-label {
523
+ position: relative;
524
+ gap: var(--pf-v6-c-label--Gap);
525
+ min-width: var(--pf-v6-c-label--MinWidth);
526
+ max-width: var(--pf-v6-c-label--MaxWidth);
527
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
528
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
529
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
530
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
531
+ font-size: var(--pf-v6-c-label--FontSize);
532
+ white-space: nowrap;
533
+ background: transparent;
534
+ isolation: isolate;
535
+ border: 0;
536
+ border-radius: var(--pf-v6-c-label--BorderRadius);
537
+ }
538
+
539
+ .pf-v6-c-label.pf-m-blue {
540
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
541
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
542
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
543
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
544
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
545
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
546
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
547
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
548
+ }
549
+
550
+ .pf-v6-c-label.pf-m-red {
551
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
552
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
553
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
554
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
555
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
556
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
557
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
558
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
559
+ }
560
+
561
+ .pf-v6-c-label.pf-m-orange {
562
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
563
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
564
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
565
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
566
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
567
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
568
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
569
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
570
+ }
571
+
572
+ .pf-v6-c-label.pf-m-orangered {
573
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
574
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
575
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
576
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
577
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
578
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
579
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
580
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
581
+ }
582
+
583
+ .pf-v6-c-label.pf-m-yellow {
584
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
585
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
586
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
587
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
588
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
589
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
590
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
591
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
592
+ }
593
+
594
+ .pf-v6-c-label.pf-m-green {
595
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
596
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
597
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
598
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
599
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
600
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
601
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
602
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
603
+ }
604
+
605
+ .pf-v6-c-label.pf-m-teal {
606
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
607
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
608
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
609
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
610
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
611
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
612
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
613
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
472
614
  }
473
615
 
474
- .pf-v6-c-menu-toggle {
475
- position: relative;
476
- display: inline-flex;
477
- gap: var(--pf-v6-c-menu-toggle--Gap);
478
- align-items: center;
479
- justify-content: center;
480
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
481
- max-width: 100%;
482
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
483
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
484
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
485
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
486
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
487
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
488
- color: var(--pf-v6-c-menu-toggle--Color);
489
- cursor: pointer;
490
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
491
- border: 0;
492
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
493
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
494
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
616
+ .pf-v6-c-label.pf-m-purple {
617
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
618
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
619
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
620
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
621
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
622
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
623
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
624
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
495
625
  }
496
626
 
497
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
498
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
627
+ .pf-v6-c-label.pf-m-success {
628
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
629
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
630
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
631
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
632
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
633
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
634
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
635
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
636
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
637
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
499
638
  }
500
639
 
501
- .pf-v6-c-menu-toggle::before {
502
- position: absolute;
503
- inset-block-start: 0;
504
- inset-block-end: 0;
505
- inset-inline-start: 0;
506
- inset-inline-end: 0;
507
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
508
- pointer-events: none;
509
- content: "";
510
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
511
- transition: inherit;
640
+ .pf-v6-c-label.pf-m-warning {
641
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
642
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
643
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
644
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
645
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
646
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
647
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
648
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
649
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
650
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
512
651
  }
513
652
 
514
- .pf-v6-c-menu-toggle.pf-m-primary {
515
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
516
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
517
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
518
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
519
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
520
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
521
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
522
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
523
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
524
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
525
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
526
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
527
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
528
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
529
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
530
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
531
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
653
+ .pf-v6-c-label.pf-m-danger {
654
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
655
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
656
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
657
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
658
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
659
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
660
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
661
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
662
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
663
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
532
664
  }
533
665
 
534
- .pf-v6-c-menu-toggle.pf-m-secondary {
535
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
536
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
537
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
538
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
539
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
540
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
541
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
542
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
543
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
544
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
545
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
546
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
547
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
548
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
549
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
550
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
551
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
666
+ .pf-v6-c-label.pf-m-info {
667
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
668
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
669
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
670
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
671
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
672
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
673
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
674
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
675
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
676
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
552
677
  }
553
678
 
554
- .pf-v6-c-menu-toggle.pf-m-full-height {
555
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
556
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
557
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
558
- align-items: center;
559
- height: 100%;
679
+ .pf-v6-c-label.pf-m-custom {
680
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
681
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
682
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
683
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
684
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
685
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
686
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
687
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
688
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
689
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
560
690
  }
561
691
 
562
- .pf-v6-c-menu-toggle.pf-m-full-width {
563
- width: 100%;
692
+ .pf-v6-c-label.pf-m-compact {
693
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
694
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
695
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
696
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
697
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
698
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
699
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
564
700
  }
565
701
 
566
- .pf-v6-c-menu-toggle.pf-m-plain {
567
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
568
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
569
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
570
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
571
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
572
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
573
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
574
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
575
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
576
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
577
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
578
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
579
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
580
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
581
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
582
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
702
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
703
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
704
+ }
705
+
706
+ .pf-v6-c-label.pf-m-outline {
707
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
708
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
709
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
710
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
711
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
712
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
713
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
714
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
715
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
716
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
717
+ }
718
+
719
+ .pf-v6-c-label.pf-m-editable {
720
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
721
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
722
+ }
723
+
724
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
725
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
726
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
727
+ }
728
+
729
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
730
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
731
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
732
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
733
+ }
734
+
735
+ .pf-v6-c-label.pf-m-editable-active {
736
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
737
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
738
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
739
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
740
+ }
741
+
742
+ .pf-v6-c-label.pf-m-overflow {
743
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
744
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
745
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
746
+ }
747
+
748
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
749
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
750
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
751
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
752
+ }
753
+
754
+ .pf-v6-c-label.pf-m-add {
755
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
756
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
757
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
758
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
759
+ }
760
+
761
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
762
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
763
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
764
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
765
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
766
+ }
767
+
768
+ .pf-v6-c-label.pf-m-clickable {
769
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
770
+ }
771
+
772
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
773
+ text-decoration-line: none;
774
+ }
775
+
776
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
777
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
778
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
779
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
780
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
781
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
782
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
783
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
583
784
  }
584
785
 
585
- .pf-v6-c-menu-toggle.pf-m-plain::before {
586
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
587
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
786
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
787
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
588
788
  }
589
789
 
590
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
591
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
592
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
593
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
594
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
595
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
596
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
597
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
598
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
599
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
600
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
790
+ .pf-v6-c-label.pf-m-disabled {
791
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
792
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
793
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
794
+ --pf-v6-c-label--BorderWidth: 0;
795
+ pointer-events: none;
601
796
  }
602
797
 
603
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
604
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
605
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
606
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
607
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
608
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
609
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
798
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
799
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
610
800
  }
611
801
 
612
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
613
- border: 0;
802
+ .pf-v6-c-label,
803
+ .pf-v6-c-label__content {
804
+ display: inline-flex;
805
+ align-items: center;
806
+ justify-content: center;
614
807
  }
615
808
 
616
- .pf-v6-c-menu-toggle.pf-m-small {
617
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
618
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
619
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
620
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
621
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
622
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
623
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
624
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
809
+ .pf-v6-c-label__text {
810
+ overflow: hidden;
811
+ text-overflow: ellipsis;
812
+ white-space: nowrap;
813
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
625
814
  }
626
815
 
627
- .pf-v6-c-menu-toggle.pf-m-success {
628
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
629
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
816
+ .pf-v6-c-label__content {
817
+ gap: var(--pf-v6-c-label__content--Gap);
818
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
819
+ padding: 0;
820
+ overflow: hidden;
821
+ color: var(--pf-v6-c-label--Color);
822
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
823
+ background: transparent;
824
+ border-width: 0;
630
825
  }
631
826
 
632
- .pf-v6-c-menu-toggle.pf-m-warning {
633
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
634
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
827
+ .pf-v6-c-label__content::before {
828
+ position: absolute;
829
+ inset: 0;
830
+ z-index: -1;
831
+ pointer-events: none;
832
+ content: "";
833
+ background-color: var(--pf-v6-c-label--BackgroundColor);
834
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
835
+ border-radius: var(--pf-v6-c-label--BorderRadius);
635
836
  }
636
837
 
637
- .pf-v6-c-menu-toggle.pf-m-danger {
638
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
639
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
838
+ input.pf-v6-c-label__content {
839
+ overflow: hidden;
840
+ text-overflow: ellipsis;
841
+ white-space: nowrap;
640
842
  }
641
843
 
642
- @media screen and (prefers-reduced-motion: no-preference) {
643
- .pf-v6-c-menu-toggle.pf-m-danger {
644
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
645
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
646
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
647
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
648
- animation-fill-mode: both;
649
- }
844
+ .pf-v6-c-label__icon {
845
+ color: var(--pf-v6-c-label__icon--Color);
650
846
  }
651
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
652
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
653
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
654
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
847
+
848
+ .pf-v6-c-label__actions {
849
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
655
850
  }
656
851
 
657
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
658
- from {
659
- opacity: 0;
660
- }
661
- to {
662
- opacity: 1;
663
- }
852
+ .pf-v6-c-label__actions .pf-v6-c-button {
853
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
854
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
855
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
856
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
857
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
858
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
859
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
860
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
664
861
  }
665
- .pf-v6-c-menu-toggle.pf-m-settings {
666
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
667
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
668
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
669
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
670
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
671
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
672
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
862
+
863
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
864
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
673
865
  }
674
866
 
675
- .pf-v6-c-menu-toggle.pf-m-placeholder {
676
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
867
+ .pf-v6-c-text-input-group {
868
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
869
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
870
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
871
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
872
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
873
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
874
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
875
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
876
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
877
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
878
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
879
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
880
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
881
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
882
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
883
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
884
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
885
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
886
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
887
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
888
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
889
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
890
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
891
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
892
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
893
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
894
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
895
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
896
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
897
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
898
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
899
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
900
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
901
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
902
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
903
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
904
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
905
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
906
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
907
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
908
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
909
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
910
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
911
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
912
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
913
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
914
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
915
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
916
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
917
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
918
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
677
919
  }
678
920
 
679
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
680
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
681
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
682
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
683
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
684
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
921
+ .pf-v6-c-text-input-group {
922
+ position: relative;
923
+ display: flex;
924
+ width: 100%;
925
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
926
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
927
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
928
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
929
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
930
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
931
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
932
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
685
933
  }
686
934
 
687
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
688
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
935
+ .pf-v6-c-text-input-group::before {
936
+ position: absolute;
937
+ inset: 0;
689
938
  pointer-events: none;
939
+ content: "";
940
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
941
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
942
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
943
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
944
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
690
945
  }
691
946
 
692
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
693
- syntax: "<length>";
694
- inherits: false;
695
- initial-value: 0;
947
+ .pf-v6-c-text-input-group.pf-m-disabled {
948
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
949
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
950
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
951
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
952
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
953
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
954
+ pointer-events: none;
696
955
  }
697
- @media (prefers-reduced-motion: no-preference) {
698
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
699
- 33% {
700
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
701
- }
702
- 66% {
703
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
704
- }
705
- }
956
+
957
+ .pf-v6-c-text-input-group.pf-m-plain {
958
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
706
959
  }
707
- .pf-v6-c-menu-toggle.pf-m-split-button {
708
- --pf-v6-c-menu-toggle--Gap: 0;
709
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
710
- padding: 0;
960
+
961
+ .pf-v6-c-text-input-group.pf-m-plain::before {
962
+ border: 0;
711
963
  }
712
964
 
713
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
714
- position: relative;
715
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
716
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
717
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
718
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
965
+ .pf-v6-c-text-input-group.pf-m-success {
966
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
967
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
968
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
969
+ }
970
+
971
+ .pf-v6-c-text-input-group.pf-m-warning {
972
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
973
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
974
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
719
975
  }
720
976
 
721
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
722
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
723
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
977
+ .pf-v6-c-text-input-group.pf-m-error {
978
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
979
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
980
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
724
981
  }
725
982
 
726
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
727
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
728
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
983
+ @media (prefers-reduced-motion: no-preference) {
984
+ .pf-v6-c-text-input-group.pf-m-error {
985
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
986
+ animation-name: pf-v6-global-danger-jiggle-motion;
987
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
988
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
989
+ animation-fill-mode: both;
990
+ }
991
+ }
992
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
993
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
994
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
995
+ animation-name: pf-v6-global-fade-in;
996
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
997
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
729
998
  }
730
999
 
731
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
732
- --pf-v6-c-check__label--Color: currentcolor;
733
- --pf-v6-c-check__label--disabled--Color: currentcolor;
734
- align-items: center;
735
- align-self: stretch;
1000
+ .pf-v6-c-text-input-group:hover {
1001
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
736
1002
  }
737
1003
 
738
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
739
- --pf-v6-c-check__input--TranslateY: 0;
740
- align-self: center;
1004
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1005
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
741
1006
  }
742
1007
 
743
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
744
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1008
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1009
+ --pf-v6-c-text-input-group__text--Position: relative;
745
1010
  }
746
1011
 
747
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
748
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1012
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1013
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1014
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
749
1015
  }
750
1016
 
751
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
752
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
753
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1017
+ .pf-v6-c-text-input-group__main {
1018
+ display: flex;
1019
+ flex: 1;
1020
+ flex-wrap: wrap;
1021
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1022
+ min-width: 0;
754
1023
  }
755
1024
 
756
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
757
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
758
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1025
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1026
+ --pf-v6-c-text-input-group__text--Position: relative;
1027
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1028
+ display: inline-flex;
1029
+ align-items: center;
1030
+ justify-content: center;
1031
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
759
1032
  }
760
1033
 
761
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
762
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1034
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1035
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
763
1036
  }
764
1037
 
765
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
766
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1038
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1039
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1040
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1041
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
767
1042
  }
768
1043
 
769
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
770
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
771
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
772
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1044
+ .pf-v6-c-text-input-group__text {
1045
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1046
+ display: inline-grid;
1047
+ flex: 1;
1048
+ grid-template-areas: "text-input";
1049
+ grid-template-columns: 1fr;
773
1050
  }
774
1051
 
775
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
776
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
777
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
778
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1052
+ .pf-v6-c-text-input-group__icon {
1053
+ position: absolute;
1054
+ inset-block-start: 50%;
1055
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1056
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1057
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1058
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
779
1059
  }
780
1060
 
781
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
782
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1061
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1062
+ inset-inline-start: auto;
1063
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1064
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
783
1065
  }
784
1066
 
785
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
786
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
787
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
788
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1067
+ .pf-v6-c-text-input-group__text-input {
1068
+ overflow: hidden;
1069
+ text-overflow: ellipsis;
1070
+ white-space: nowrap;
1071
+ position: relative;
1072
+ width: 100%;
1073
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1074
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1075
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1076
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1077
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1078
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1079
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1080
+ border: 0;
1081
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
789
1082
  }
790
1083
 
791
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
792
- content: none;
1084
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1085
+ grid-area: text-input;
793
1086
  }
794
1087
 
795
- .pf-v6-c-menu-toggle.pf-m-typeahead {
796
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
797
- --pf-v6-c-menu-toggle--Gap: 0;
798
- align-items: stretch;
799
- padding: 0;
1088
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1089
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
800
1090
  }
801
1091
 
802
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
803
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1092
+ .pf-v6-c-text-input-group__text-input::placeholder {
1093
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
804
1094
  }
805
1095
 
806
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
807
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1096
+ .pf-v6-c-text-input-group__utilities {
808
1097
  display: flex;
809
- align-items: stretch;
1098
+ align-items: center;
1099
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1100
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
810
1101
  }
811
1102
 
812
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
813
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
814
- flex: 1;
1103
+ .pf-v6-c-text-input-group__utilities > * + * {
1104
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
815
1105
  }
816
1106
 
817
- .pf-v6-c-menu-toggle__button {
818
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
819
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
820
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
821
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
822
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
823
- color: inherit;
824
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
825
- border: 0;
1107
+ .pf-v6-c-text-input-group__group {
1108
+ display: flex;
826
1109
  }
827
1110
 
828
- .pf-v6-c-menu-toggle__button.pf-m-text {
1111
+ .pf-v6-c-label-group {
1112
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1113
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1114
+ --pf-v6-c-label-group--MaxWidth: 100%;
1115
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1116
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1117
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1118
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1119
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1120
+ --pf-v6-c-label-group__main--MinWidth: 0;
1121
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1122
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1123
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1124
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1125
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1126
+ --pf-v6-c-label-group__list--MinWidth: 0;
1127
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1128
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1129
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1130
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1131
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1132
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1133
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1134
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1135
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1136
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1137
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1138
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1139
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1140
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1141
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1142
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1143
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1144
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1145
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1146
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1147
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1148
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1149
+ }
1150
+
1151
+ .pf-v6-c-label-group {
829
1152
  display: inline-flex;
830
- align-items: baseline;
1153
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1154
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1155
+ align-items: center;
1156
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
831
1157
  }
832
1158
 
833
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
834
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
835
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1159
+ .pf-v6-c-label-group.pf-m-category {
1160
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1161
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1162
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1163
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1164
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1165
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1166
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
836
1167
  }
837
1168
 
838
- .pf-v6-c-menu-toggle__text {
839
- overflow: hidden;
840
- text-overflow: ellipsis;
841
- white-space: nowrap;
842
- min-width: 0;
1169
+ .pf-v6-c-label-group.pf-m-vertical {
1170
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1171
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1172
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1173
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1174
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1175
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1176
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
843
1177
  }
844
1178
 
845
- .pf-v6-c-menu-toggle__count {
846
- display: flex;
847
- flex-wrap: nowrap;
1179
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1180
+ align-items: flex-start;
848
1181
  }
849
1182
 
850
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
851
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
852
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
853
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
854
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1183
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1184
+ flex-direction: column;
1185
+ align-items: flex-start;
1186
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
855
1187
  }
856
1188
 
857
- .pf-v6-c-menu-toggle__icon {
858
- flex-shrink: 0;
859
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
860
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
861
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
862
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1189
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1190
+ flex-direction: column;
1191
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1192
+ }
1193
+
1194
+ .pf-v6-c-label-group.pf-m-editable,
1195
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1196
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1197
+ display: flex;
863
1198
  }
864
1199
 
865
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
866
- vertical-align: middle;
1200
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1201
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1202
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1203
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1204
+ flex: 1;
867
1205
  }
868
1206
 
869
- .pf-v6-c-menu-toggle__controls {
1207
+ .pf-v6-c-label-group__main {
870
1208
  display: flex;
871
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
872
- align-items: center;
873
- justify-content: center;
874
- margin-inline-start: auto;
1209
+ flex: 1;
1210
+ flex-wrap: wrap;
1211
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1212
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1213
+ align-items: baseline;
1214
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
875
1215
  }
876
1216
 
877
- .pf-v6-c-menu-toggle__toggle-icon {
878
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
879
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1217
+ .pf-v6-c-label-group__list {
1218
+ display: inline-flex;
1219
+ flex-wrap: wrap;
1220
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1221
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1222
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
880
1223
  }
881
1224
 
882
- .pf-v6-c-menu-toggle__status-icon {
883
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1225
+ .pf-v6-c-label-group__list-item {
1226
+ display: inline-flex;
1227
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
884
1228
  }
885
1229
 
886
- .pf-v6-c-badge {
887
- --pf-v6-c-badge--BorderColor: transparent;
888
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
889
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
890
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
891
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
892
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
893
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
894
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
895
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
896
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
897
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
898
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
899
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
900
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
901
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
902
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
903
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
904
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
905
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
906
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
907
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1230
+ .pf-v6-c-label-group__label {
1231
+ overflow: hidden;
1232
+ text-overflow: ellipsis;
1233
+ white-space: nowrap;
1234
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
908
1235
  }
909
1236
 
910
- .pf-v6-c-badge {
911
- position: relative;
912
- display: inline-block;
913
- min-width: var(--pf-v6-c-badge--MinWidth);
914
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
915
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
916
- font-size: var(--pf-v6-c-badge--FontSize);
917
- font-weight: var(--pf-v6-c-badge--FontWeight);
918
- color: var(--pf-v6-c-badge--Color);
919
- text-align: center;
920
- white-space: nowrap;
921
- background-color: var(--pf-v6-c-badge--BackgroundColor);
922
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1237
+ .pf-v6-c-label-group__close {
1238
+ display: flex;
1239
+ align-self: flex-start;
923
1240
  }
924
1241
 
925
- .pf-v6-c-badge::after {
926
- position: absolute;
927
- inset: 0;
928
- pointer-events: none;
929
- content: "";
930
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
931
- border-radius: inherit;
1242
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1243
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1244
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1245
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1246
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1247
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
932
1248
  }
933
1249
 
934
- .pf-v6-c-badge.pf-m-read {
935
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
936
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
937
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
938
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1250
+ .pf-v6-c-label-group__textarea {
1251
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1252
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1253
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1254
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1255
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1256
+ white-space: nowrap;
1257
+ resize: none;
1258
+ border: 0;
1259
+ -ms-overflow-style: none;
1260
+ scrollbar-width: none;
939
1261
  }
940
1262
 
941
- .pf-v6-c-badge.pf-m-unread {
942
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
943
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
944
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1263
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1264
+ display: none;
1265
+ }
1266
+
1267
+ .pf-v6-c-menu-toggle {
1268
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1269
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1270
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1271
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1272
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1273
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1274
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1275
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1276
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1277
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1278
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
1279
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
1280
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
1281
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1282
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1283
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1284
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1285
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1286
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1287
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
1288
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1289
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1290
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1291
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1292
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1293
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1294
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1295
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1296
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1297
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1298
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1299
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1300
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1301
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1302
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
1303
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
1304
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
1305
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
1306
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
1307
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
1308
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
1309
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
1310
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1311
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1312
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1313
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1314
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1315
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1316
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
1317
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1318
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1319
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1320
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1321
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1322
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1323
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1324
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1325
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1326
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1327
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1328
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1329
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1330
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1331
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
1332
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1333
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1334
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
1335
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1336
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1337
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1338
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1339
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
1340
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1341
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1342
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1343
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1344
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1345
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1346
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1347
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1348
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1349
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1350
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1351
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1352
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1353
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
1354
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1355
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1356
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1357
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1358
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1359
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1360
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1361
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
1362
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1363
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1364
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1365
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1366
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1367
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1368
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1369
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1370
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1371
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1372
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1373
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1374
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1375
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1376
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1377
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1378
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1379
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
1380
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1381
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1382
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1383
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1384
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1385
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1386
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1387
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1388
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1389
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1390
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1391
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1392
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1393
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1394
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1395
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1396
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1397
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1398
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
1399
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1400
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1401
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1402
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1403
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1404
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1405
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1406
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
1407
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
1408
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1409
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1410
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1411
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1412
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1413
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1414
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
945
1415
  }
946
1416
 
947
- .pf-v6-c-badge.pf-m-disabled {
948
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
949
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1417
+ .pf-v6-c-menu-toggle {
1418
+ position: relative;
1419
+ display: inline-flex;
1420
+ gap: var(--pf-v6-c-menu-toggle--Gap);
1421
+ align-items: center;
1422
+ justify-content: center;
1423
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
1424
+ max-width: 100%;
1425
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1426
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1427
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1428
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1429
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
1430
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1431
+ color: var(--pf-v6-c-menu-toggle--Color);
1432
+ cursor: pointer;
1433
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1434
+ border: 0;
1435
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1436
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1437
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
950
1438
  }
951
1439
 
952
- .pf-v6-c-badge.pf-m-disabled::after {
953
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1440
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1441
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
954
1442
  }
955
1443
 
956
- .pf-v6-c-badge__toggle-icon {
957
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
958
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1444
+ .pf-v6-c-menu-toggle::before {
1445
+ position: absolute;
1446
+ inset-block-start: 0;
1447
+ inset-block-end: 0;
1448
+ inset-inline-start: 0;
1449
+ inset-inline-end: 0;
1450
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1451
+ pointer-events: none;
1452
+ content: "";
1453
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1454
+ transition: inherit;
959
1455
  }
960
1456
 
961
- .pf-v6-c-label {
962
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
963
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
964
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
965
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
966
- --pf-v6-c-label--MaxWidth: 100%;
967
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
968
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
969
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
970
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
971
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
972
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
973
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
974
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
975
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
976
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
977
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
978
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
979
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
980
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
981
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
982
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
983
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
984
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
985
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
986
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
987
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
988
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
989
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
990
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
991
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
992
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
993
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
994
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
995
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
996
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
997
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
998
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
999
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1000
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1001
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1002
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1003
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1004
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1005
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1006
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1007
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1008
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1009
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1010
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1011
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1012
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1013
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1014
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1015
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1016
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1017
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1018
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1019
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1020
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1021
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1022
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1023
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1024
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1025
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1026
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1027
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1028
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1029
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1030
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1031
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1032
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1033
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1034
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1035
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1036
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1037
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1038
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1039
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1040
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1041
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1042
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1043
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1044
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1045
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1046
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1047
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1048
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1049
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1050
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1051
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1052
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1053
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1054
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1055
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1056
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1057
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1058
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1059
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1060
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1061
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1062
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1063
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1064
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1065
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1066
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1067
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1068
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1069
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1070
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1071
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1072
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1073
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1074
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1075
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1076
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1077
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1078
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1079
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1080
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1081
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1082
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1083
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1084
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1085
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1086
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1087
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1088
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1089
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1090
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1091
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1092
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1093
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1094
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1095
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1096
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1097
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1098
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1099
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1100
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1101
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1102
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1103
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1104
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1105
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1106
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1107
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1108
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1109
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1110
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1111
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1112
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1113
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1114
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1115
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1116
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1117
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1118
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1119
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1120
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1121
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1122
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1123
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1124
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1125
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1126
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1127
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1128
- --pf-v6-c-label__content--MaxWidth: 100%;
1129
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1130
- --pf-v6-c-label__content--Cursor: initial;
1131
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1132
- --pf-v6-c-label__text--MaxWidth: 100%;
1133
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
1134
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1135
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1136
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1137
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1138
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1139
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1140
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1141
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1142
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1143
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1144
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1145
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1146
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1147
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1148
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1149
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1150
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1151
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1152
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1153
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1154
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1155
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1156
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1457
+ .pf-v6-c-menu-toggle.pf-m-primary {
1458
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1459
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1460
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1461
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1462
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1463
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1464
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1465
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1466
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1467
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1468
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1469
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1470
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1471
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1472
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1473
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1474
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1157
1475
  }
1158
1476
 
1159
- .pf-v6-c-label {
1160
- position: relative;
1161
- gap: var(--pf-v6-c-label--Gap);
1162
- min-width: var(--pf-v6-c-label--MinWidth);
1163
- max-width: var(--pf-v6-c-label--MaxWidth);
1164
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1165
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1166
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1167
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1168
- font-size: var(--pf-v6-c-label--FontSize);
1169
- white-space: nowrap;
1170
- background: transparent;
1171
- isolation: isolate;
1477
+ .pf-v6-c-menu-toggle.pf-m-secondary {
1478
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1479
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1480
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1481
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
1482
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1483
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1484
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1485
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1486
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1487
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1488
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
1489
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1490
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1491
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1492
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1493
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1494
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1495
+ }
1496
+
1497
+ .pf-v6-c-menu-toggle.pf-m-full-height {
1498
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1499
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1500
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1501
+ align-items: center;
1502
+ height: 100%;
1503
+ }
1504
+
1505
+ .pf-v6-c-menu-toggle.pf-m-full-width {
1506
+ width: 100%;
1507
+ }
1508
+
1509
+ .pf-v6-c-menu-toggle.pf-m-plain {
1510
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1511
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1512
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1513
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1514
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1515
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1516
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
1517
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1518
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1519
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1520
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1521
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1522
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1523
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1524
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1525
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1526
+ }
1527
+
1528
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
1529
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1530
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1531
+ }
1532
+
1533
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
1534
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1535
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1536
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1537
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
1538
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1539
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1540
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
1541
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
1542
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
1543
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
1544
+ }
1545
+
1546
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1547
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1548
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1549
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1550
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
1551
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1552
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1553
+ }
1554
+
1555
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1172
1556
  border: 0;
1173
- border-radius: var(--pf-v6-c-label--BorderRadius);
1174
1557
  }
1175
1558
 
1176
- .pf-v6-c-label.pf-m-blue {
1177
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1178
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1179
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1180
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1181
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1182
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1183
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1184
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1559
+ .pf-v6-c-menu-toggle.pf-m-small {
1560
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1561
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1562
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1563
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1564
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1565
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1566
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1567
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
1185
1568
  }
1186
1569
 
1187
- .pf-v6-c-label.pf-m-red {
1188
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1189
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1190
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1191
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1192
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1193
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1194
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1195
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1570
+ .pf-v6-c-menu-toggle.pf-m-success {
1571
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1572
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1196
1573
  }
1197
1574
 
1198
- .pf-v6-c-label.pf-m-orange {
1199
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1200
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1201
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1202
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1203
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1204
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1205
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1206
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1575
+ .pf-v6-c-menu-toggle.pf-m-warning {
1576
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1577
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1207
1578
  }
1208
1579
 
1209
- .pf-v6-c-label.pf-m-orangered {
1210
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1211
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1212
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1213
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1214
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1215
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1216
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1217
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1580
+ .pf-v6-c-menu-toggle.pf-m-danger {
1581
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1582
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1218
1583
  }
1219
1584
 
1220
- .pf-v6-c-label.pf-m-yellow {
1221
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1222
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1223
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1224
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1225
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1226
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1227
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1228
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1585
+ @media screen and (prefers-reduced-motion: no-preference) {
1586
+ .pf-v6-c-menu-toggle.pf-m-danger {
1587
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1588
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1589
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1590
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1591
+ animation-fill-mode: both;
1592
+ }
1593
+ }
1594
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1595
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1596
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1597
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1598
+ }
1599
+
1600
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1601
+ from {
1602
+ opacity: 0;
1603
+ }
1604
+ to {
1605
+ opacity: 1;
1606
+ }
1607
+ }
1608
+ .pf-v6-c-menu-toggle.pf-m-settings {
1609
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1610
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1611
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1612
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1613
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1614
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1615
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1616
+ }
1617
+
1618
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1619
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1620
+ }
1621
+
1622
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1623
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1624
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1625
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1626
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1627
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1628
+ }
1629
+
1630
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1631
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1632
+ pointer-events: none;
1633
+ }
1634
+
1635
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1636
+ syntax: "<length>";
1637
+ inherits: false;
1638
+ initial-value: 0;
1639
+ }
1640
+ @media (prefers-reduced-motion: no-preference) {
1641
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1642
+ 33% {
1643
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1644
+ }
1645
+ 66% {
1646
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1647
+ }
1648
+ }
1649
+ }
1650
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1651
+ --pf-v6-c-menu-toggle--Gap: 0;
1652
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1653
+ padding: 0;
1654
+ }
1655
+
1656
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1657
+ position: relative;
1658
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1659
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1660
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1661
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1662
+ }
1663
+
1664
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1665
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1666
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1667
+ }
1668
+
1669
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1670
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1671
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1672
+ }
1673
+
1674
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1675
+ --pf-v6-c-check__label--Color: currentcolor;
1676
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1677
+ align-items: center;
1678
+ align-self: stretch;
1229
1679
  }
1230
1680
 
1231
- .pf-v6-c-label.pf-m-green {
1232
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1233
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1234
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1235
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1236
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1237
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1238
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1239
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1681
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1682
+ --pf-v6-c-check__input--TranslateY: 0;
1683
+ align-self: center;
1240
1684
  }
1241
1685
 
1242
- .pf-v6-c-label.pf-m-teal {
1243
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1244
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1245
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1246
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1247
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1248
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1249
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1250
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1686
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1687
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1251
1688
  }
1252
1689
 
1253
- .pf-v6-c-label.pf-m-purple {
1254
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1255
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1256
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1257
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1258
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1259
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1260
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1261
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1690
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1691
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1262
1692
  }
1263
1693
 
1264
- .pf-v6-c-label.pf-m-success {
1265
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1266
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1267
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1268
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1269
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1270
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1271
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1272
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1273
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1274
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1694
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1695
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1696
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1275
1697
  }
1276
1698
 
1277
- .pf-v6-c-label.pf-m-warning {
1278
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1279
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1280
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1281
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1282
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1283
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1284
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1285
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1286
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1287
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
1699
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1700
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1701
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1288
1702
  }
1289
1703
 
1290
- .pf-v6-c-label.pf-m-danger {
1291
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1292
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1293
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1294
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1295
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1296
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1297
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1298
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1299
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1300
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1704
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1705
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1301
1706
  }
1302
1707
 
1303
- .pf-v6-c-label.pf-m-info {
1304
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1305
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1306
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1307
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1308
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1309
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1310
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1311
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1312
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1313
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1708
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1709
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1314
1710
  }
1315
1711
 
1316
- .pf-v6-c-label.pf-m-custom {
1317
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1318
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1319
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1320
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1321
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1322
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1323
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1324
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1325
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1326
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1712
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1713
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1714
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1715
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1327
1716
  }
1328
1717
 
1329
- .pf-v6-c-label.pf-m-compact {
1330
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1331
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1332
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1333
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1334
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1335
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1336
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1718
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1719
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1720
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1721
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1337
1722
  }
1338
1723
 
1339
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1340
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1724
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1725
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1341
1726
  }
1342
1727
 
1343
- .pf-v6-c-label.pf-m-outline {
1344
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1345
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1346
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1347
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1348
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1349
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1350
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1351
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1352
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1353
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1728
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1729
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1730
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1731
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1354
1732
  }
1355
1733
 
1356
- .pf-v6-c-label.pf-m-editable {
1357
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1358
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1734
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1735
+ content: none;
1359
1736
  }
1360
1737
 
1361
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1362
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1363
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1738
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1739
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1740
+ --pf-v6-c-menu-toggle--Gap: 0;
1741
+ align-items: stretch;
1742
+ padding: 0;
1364
1743
  }
1365
1744
 
1366
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1367
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1368
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1369
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1745
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1746
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1370
1747
  }
1371
1748
 
1372
- .pf-v6-c-label.pf-m-editable-active {
1373
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1374
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1375
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1376
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1749
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1750
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1751
+ display: flex;
1752
+ align-items: stretch;
1377
1753
  }
1378
1754
 
1379
- .pf-v6-c-label.pf-m-overflow {
1380
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1381
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1382
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1755
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1756
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1757
+ flex: 1;
1383
1758
  }
1384
1759
 
1385
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1386
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1387
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1388
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1760
+ .pf-v6-c-menu-toggle__button {
1761
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1762
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1763
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1764
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1765
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1766
+ color: inherit;
1767
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1768
+ border: 0;
1389
1769
  }
1390
1770
 
1391
- .pf-v6-c-label.pf-m-add {
1392
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1393
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1394
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1395
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1771
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1772
+ display: inline-flex;
1773
+ align-items: baseline;
1396
1774
  }
1397
1775
 
1398
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1399
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1400
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1401
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1402
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1776
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1777
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1778
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1403
1779
  }
1404
1780
 
1405
- .pf-v6-c-label.pf-m-clickable {
1406
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1781
+ .pf-v6-c-menu-toggle__text {
1782
+ overflow: hidden;
1783
+ text-overflow: ellipsis;
1784
+ white-space: nowrap;
1785
+ min-width: 0;
1407
1786
  }
1408
1787
 
1409
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1410
- text-decoration-line: none;
1788
+ .pf-v6-c-menu-toggle__count {
1789
+ display: flex;
1790
+ flex-wrap: nowrap;
1411
1791
  }
1412
1792
 
1413
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1414
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1415
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1416
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1417
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1418
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1419
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1420
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1793
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1794
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1795
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1796
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1797
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1421
1798
  }
1422
1799
 
1423
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1424
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1800
+ .pf-v6-c-menu-toggle__icon {
1801
+ flex-shrink: 0;
1802
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1803
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1804
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1805
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1425
1806
  }
1426
1807
 
1427
- .pf-v6-c-label.pf-m-disabled {
1428
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1429
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1430
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1431
- --pf-v6-c-label--BorderWidth: 0;
1432
- pointer-events: none;
1808
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
1809
+ vertical-align: middle;
1433
1810
  }
1434
1811
 
1435
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1436
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1812
+ .pf-v6-c-menu-toggle__controls {
1813
+ display: flex;
1814
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1815
+ align-items: center;
1816
+ justify-content: center;
1817
+ margin-inline-start: auto;
1818
+ }
1819
+
1820
+ .pf-v6-c-menu-toggle__toggle-icon {
1821
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1822
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1437
1823
  }
1438
1824
 
1439
- .pf-v6-c-label,
1440
- .pf-v6-c-label__content {
1441
- display: inline-flex;
1442
- align-items: center;
1443
- justify-content: center;
1825
+ .pf-v6-c-menu-toggle__status-icon {
1826
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1444
1827
  }
1445
1828
 
1446
- .pf-v6-c-label__text {
1447
- overflow: hidden;
1448
- text-overflow: ellipsis;
1449
- white-space: nowrap;
1450
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1829
+ .pf-v6-c-badge {
1830
+ --pf-v6-c-badge--BorderColor: transparent;
1831
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1832
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1833
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1834
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1835
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1836
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1837
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1838
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1839
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1840
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1841
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1842
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1843
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1844
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1845
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1846
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1847
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1848
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1849
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1850
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1451
1851
  }
1452
1852
 
1453
- .pf-v6-c-label__content {
1454
- gap: var(--pf-v6-c-label__content--Gap);
1455
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1456
- padding: 0;
1457
- overflow: hidden;
1458
- color: var(--pf-v6-c-label--Color);
1459
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1460
- background: transparent;
1461
- border-width: 0;
1853
+ .pf-v6-c-badge {
1854
+ position: relative;
1855
+ display: inline-block;
1856
+ min-width: var(--pf-v6-c-badge--MinWidth);
1857
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1858
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1859
+ font-size: var(--pf-v6-c-badge--FontSize);
1860
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1861
+ color: var(--pf-v6-c-badge--Color);
1862
+ text-align: center;
1863
+ white-space: nowrap;
1864
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1865
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1462
1866
  }
1463
1867
 
1464
- .pf-v6-c-label__content::before {
1868
+ .pf-v6-c-badge::after {
1465
1869
  position: absolute;
1466
1870
  inset: 0;
1467
- z-index: -1;
1468
1871
  pointer-events: none;
1469
1872
  content: "";
1470
- background-color: var(--pf-v6-c-label--BackgroundColor);
1471
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1472
- border-radius: var(--pf-v6-c-label--BorderRadius);
1873
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1874
+ border-radius: inherit;
1473
1875
  }
1474
1876
 
1475
- input.pf-v6-c-label__content {
1476
- overflow: hidden;
1477
- text-overflow: ellipsis;
1478
- white-space: nowrap;
1877
+ .pf-v6-c-badge.pf-m-read {
1878
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1879
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1880
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1881
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1479
1882
  }
1480
1883
 
1481
- .pf-v6-c-label__icon {
1482
- color: var(--pf-v6-c-label__icon--Color);
1884
+ .pf-v6-c-badge.pf-m-unread {
1885
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1886
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1887
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1483
1888
  }
1484
1889
 
1485
- .pf-v6-c-label__actions {
1486
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1890
+ .pf-v6-c-badge.pf-m-disabled {
1891
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1892
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1487
1893
  }
1488
1894
 
1489
- .pf-v6-c-label__actions .pf-v6-c-button {
1490
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1491
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1492
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1493
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1494
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1495
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1496
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1497
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1895
+ .pf-v6-c-badge.pf-m-disabled::after {
1896
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1498
1897
  }
1499
1898
 
1500
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1501
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1899
+ .pf-v6-c-badge__toggle-icon {
1900
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1901
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1502
1902
  }
1503
1903
 
1504
1904
  .pf-v6-c-check {
@@ -1583,162 +1983,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1583
1983
  color: var(--pf-v6-c-check__label-required--Color);
1584
1984
  }
1585
1985
 
1586
- .pf-v6-c-label-group {
1587
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1588
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1589
- --pf-v6-c-label-group--MaxWidth: 100%;
1590
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1591
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1592
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1593
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1594
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1595
- --pf-v6-c-label-group__main--MinWidth: 0;
1596
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1597
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1598
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1599
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1600
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1601
- --pf-v6-c-label-group__list--MinWidth: 0;
1602
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1603
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1604
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1605
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1606
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1607
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1608
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1609
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1610
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1611
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1612
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1613
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1614
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1615
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1616
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1617
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1618
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1619
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1620
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1621
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1622
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1623
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1624
- }
1625
-
1626
- .pf-v6-c-label-group {
1627
- display: inline-flex;
1628
- row-gap: var(--pf-v6-c-label-group--RowGap);
1629
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1630
- align-items: center;
1631
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1632
- }
1633
-
1634
- .pf-v6-c-label-group.pf-m-category {
1635
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1636
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1637
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1638
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1639
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1640
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1641
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1642
- }
1643
-
1644
- .pf-v6-c-label-group.pf-m-vertical {
1645
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1646
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1647
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1648
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1649
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1650
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1651
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1652
- }
1653
-
1654
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1655
- align-items: flex-start;
1656
- }
1657
-
1658
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1659
- flex-direction: column;
1660
- align-items: flex-start;
1661
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1662
- }
1663
-
1664
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1665
- flex-direction: column;
1666
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1667
- }
1668
-
1669
- .pf-v6-c-label-group.pf-m-editable,
1670
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1671
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1672
- display: flex;
1673
- }
1674
-
1675
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1676
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1677
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1678
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1679
- flex: 1;
1680
- }
1681
-
1682
- .pf-v6-c-label-group__main {
1683
- display: flex;
1684
- flex: 1;
1685
- flex-wrap: wrap;
1686
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1687
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1688
- align-items: baseline;
1689
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1690
- }
1691
-
1692
- .pf-v6-c-label-group__list {
1693
- display: inline-flex;
1694
- flex-wrap: wrap;
1695
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1696
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1697
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1698
- }
1699
-
1700
- .pf-v6-c-label-group__list-item {
1701
- display: inline-flex;
1702
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1703
- }
1704
-
1705
- .pf-v6-c-label-group__label {
1706
- overflow: hidden;
1707
- text-overflow: ellipsis;
1708
- white-space: nowrap;
1709
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1710
- }
1711
-
1712
- .pf-v6-c-label-group__close {
1713
- display: flex;
1714
- align-self: flex-start;
1715
- }
1716
-
1717
- .pf-v6-c-label-group__close .pf-v6-c-button {
1718
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1719
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1720
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1721
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1722
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1723
- }
1724
-
1725
- .pf-v6-c-label-group__textarea {
1726
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1727
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1728
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1729
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1730
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1731
- white-space: nowrap;
1732
- resize: none;
1733
- border: 0;
1734
- -ms-overflow-style: none;
1735
- scrollbar-width: none;
1736
- }
1737
-
1738
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1739
- display: none;
1740
- }
1741
-
1742
1986
  .pf-v6-c-button {
1743
1987
  --pf-v6-c-button--Display: inline-flex;
1744
1988
  --pf-v6-c-button--AlignItems: baseline;
@@ -2430,454 +2674,210 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2430
2674
  --pf-v6-c-button__icon--TransitionProperty: scale;
2431
2675
  --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2432
2676
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2433
- --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2434
- }
2435
-
2436
- .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
2437
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2438
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2439
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2440
- --pf-v6-c-button__icon--TransitionDelay: 0s;
2441
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
2442
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2443
- --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
2444
- }
2445
-
2446
- .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
2447
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2448
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2449
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2450
- --pf-v6-c-button__icon--TransitionDelay: 0s;
2451
- --pf-v6-c-button__icon--ScaleX: 1;
2452
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2453
- --pf-v6-c-button--hover__icon--ScaleX: 1;
2454
- }
2455
-
2456
- .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2457
- --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2458
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
2459
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
2460
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2461
- --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
2462
- --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
2463
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2464
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2465
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2466
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2467
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2468
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2469
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
2470
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
2471
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2472
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2473
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2474
- outline-offset: var(--pf-t--global--focus-ring--position--offset);
2475
- }
2476
-
2477
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2478
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2479
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2480
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2481
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2482
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2483
- }
2484
-
2485
- .pf-v6-c-button:active {
2486
- background-size: 100% 100%;
2487
- transition-duration: 0s;
2488
- }
2489
-
2490
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2491
- pointer-events: none;
2492
- }
2493
-
2494
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2495
- color: var(--pf-v6-c-button--disabled--Color);
2496
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2497
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2498
- }
2499
-
2500
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2501
- border-color: transparent;
2502
- }
2503
-
2504
- .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2505
- color: var(--pf-v6-c-button--disabled__icon--Color);
2506
- }
2507
-
2508
- .pf-v6-c-button.pf-m-aria-disabled {
2509
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2510
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2511
- cursor: default;
2512
- }
2513
-
2514
- .pf-v6-c-button.pf-m-progress {
2515
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2516
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2517
- }
2518
-
2519
- .pf-v6-c-button.pf-m-in-progress {
2520
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2521
- }
2522
-
2523
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2524
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2525
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2526
- }
2527
-
2528
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2529
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2530
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2531
- }
2532
-
2533
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2534
- opacity: 0;
2535
- }
2536
-
2537
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2538
- animation-name: pf-v6-c-button-icon-notify;
2539
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2540
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2541
- }
2542
-
2543
- .pf-v6-c-button__icon {
2544
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2545
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2546
- color: var(--pf-v6-c-button__icon--Color);
2547
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2548
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2549
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2550
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2551
- rotate: var(--pf-v6-c-button__icon--Rotate);
2552
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2553
- }
2554
-
2555
- .pf-v6-c-button__icon.pf-m-start {
2556
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2557
- }
2558
-
2559
- .pf-v6-c-button__icon.pf-m-end {
2560
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2561
- }
2562
-
2563
- .pf-v6-c-button__icon-favorite,
2564
- .pf-v6-c-button__icon-favorited {
2565
- grid-area: 1/1/1/1;
2566
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2567
- transition-property: opacity;
2568
- }
2569
-
2570
- .pf-v6-c-button__icon-favorite {
2571
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2572
- }
2573
-
2574
- .pf-v6-c-button__icon-favorited {
2575
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2576
- }
2577
-
2578
- .pf-v6-c-button__progress {
2579
- position: absolute;
2580
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2581
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2582
- line-height: 1;
2583
- color: var(--pf-v6-c-button__progress--Color);
2584
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2585
- }
2586
-
2587
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2588
- --pf-v6-c-spinner--Color: currentcolor;
2589
- }
2590
-
2591
- .pf-v6-c-button__text {
2592
- text-decoration: inherit;
2593
- }
2594
-
2595
- .pf-v6-c-button__count {
2596
- display: inline-flex;
2597
- align-items: center;
2598
- }
2599
-
2600
- .pf-v6-c-button--hamburger-icon path {
2601
- fill: none;
2602
- stroke: currentcolor;
2603
- stroke-linecap: round;
2604
- stroke-linejoin: round;
2605
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2606
- }
2607
-
2608
- .pf-v6-c-button--hamburger-icon--top {
2609
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2610
- }
2611
-
2612
- .pf-v6-c-button--hamburger-icon--middle {
2613
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2614
- }
2615
-
2616
- .pf-v6-c-button--hamburger-icon--arrow {
2617
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2618
- }
2619
-
2620
- .pf-v6-c-button--hamburger-icon--bottom {
2621
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2622
- }
2623
-
2624
- @keyframes pf-v6-c-button-icon-notify {
2625
- 33% {
2626
- transform: rotate(30deg);
2627
- }
2628
- 66% {
2629
- transform: rotate(-60deg);
2630
- }
2631
- }
2632
- @keyframes pf-v6-c-button-icon-favorited {
2633
- 50% {
2634
- scale: 1.5;
2635
- }
2636
- }
2637
- .pf-v6-c-text-input-group {
2638
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2639
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2640
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2641
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2642
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2643
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2644
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2645
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2646
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2647
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2648
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2649
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2650
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2651
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2652
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2653
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2654
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2655
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2656
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2657
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2658
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2659
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2660
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2661
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2662
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2663
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2664
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2665
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2666
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2667
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2668
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2669
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2670
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2671
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2672
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2673
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2674
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2675
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2676
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2677
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2678
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2679
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2680
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2681
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2682
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2683
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2684
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2685
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2686
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2687
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2688
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2677
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2689
2678
  }
2690
2679
 
2691
- .pf-v6-c-text-input-group {
2692
- position: relative;
2693
- display: flex;
2694
- width: 100%;
2695
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2696
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2697
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2698
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2699
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2700
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2701
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2702
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2680
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
2681
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2682
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2683
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2684
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
2685
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
2686
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2687
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
2703
2688
  }
2704
2689
 
2705
- .pf-v6-c-text-input-group::before {
2706
- position: absolute;
2707
- inset: 0;
2708
- pointer-events: none;
2709
- content: "";
2710
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2711
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2712
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2713
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2714
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2690
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
2691
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2692
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2693
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2694
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
2695
+ --pf-v6-c-button__icon--ScaleX: 1;
2696
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2697
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
2715
2698
  }
2716
2699
 
2717
- .pf-v6-c-text-input-group.pf-m-disabled {
2718
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2719
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2720
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2721
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2722
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2723
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2724
- pointer-events: none;
2700
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2701
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2702
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
2703
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
2704
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2705
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
2706
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
2707
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2708
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2709
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2710
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2711
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2712
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2713
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
2714
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
2715
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2716
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2717
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2718
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
2725
2719
  }
2726
2720
 
2727
- .pf-v6-c-text-input-group.pf-m-plain {
2728
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
2721
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2722
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2723
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2724
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2725
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2726
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2729
2727
  }
2730
2728
 
2731
- .pf-v6-c-text-input-group.pf-m-plain::before {
2732
- border: 0;
2729
+ .pf-v6-c-button:active {
2730
+ background-size: 100% 100%;
2731
+ transition-duration: 0s;
2733
2732
  }
2734
2733
 
2735
- .pf-v6-c-text-input-group.pf-m-success {
2736
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2737
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2738
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2734
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2735
+ pointer-events: none;
2739
2736
  }
2740
2737
 
2741
- .pf-v6-c-text-input-group.pf-m-warning {
2742
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2743
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2744
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2738
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2739
+ color: var(--pf-v6-c-button--disabled--Color);
2740
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2741
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2745
2742
  }
2746
2743
 
2747
- .pf-v6-c-text-input-group.pf-m-error {
2748
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2749
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2750
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2744
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2745
+ border-color: transparent;
2751
2746
  }
2752
2747
 
2753
- @media (prefers-reduced-motion: no-preference) {
2754
- .pf-v6-c-text-input-group.pf-m-error {
2755
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2756
- animation-name: pf-v6-global-danger-jiggle-motion;
2757
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2758
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2759
- animation-fill-mode: both;
2760
- }
2748
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2749
+ color: var(--pf-v6-c-button--disabled__icon--Color);
2761
2750
  }
2762
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2763
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2764
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2765
- animation-name: pf-v6-global-fade-in;
2766
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2767
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2751
+
2752
+ .pf-v6-c-button.pf-m-aria-disabled {
2753
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2754
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2755
+ cursor: default;
2768
2756
  }
2769
2757
 
2770
- .pf-v6-c-text-input-group:hover {
2771
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2758
+ .pf-v6-c-button.pf-m-progress {
2759
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2760
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2772
2761
  }
2773
2762
 
2774
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2775
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2763
+ .pf-v6-c-button.pf-m-in-progress {
2764
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2776
2765
  }
2777
2766
 
2778
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2779
- --pf-v6-c-text-input-group__text--Position: relative;
2767
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2768
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2769
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2780
2770
  }
2781
2771
 
2782
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2783
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2784
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2772
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2773
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2774
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2785
2775
  }
2786
2776
 
2787
- .pf-v6-c-text-input-group__main {
2788
- display: flex;
2789
- flex: 1;
2790
- flex-wrap: wrap;
2791
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2792
- min-width: 0;
2777
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2778
+ opacity: 0;
2793
2779
  }
2794
2780
 
2795
- .pf-v6-c-text-input-group__main.pf-m-icon {
2796
- --pf-v6-c-text-input-group__text--Position: relative;
2797
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2798
- display: inline-flex;
2799
- align-items: center;
2800
- justify-content: center;
2801
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2781
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2782
+ animation-name: pf-v6-c-button-icon-notify;
2783
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2784
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2802
2785
  }
2803
2786
 
2804
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2805
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2787
+ .pf-v6-c-button__icon {
2788
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2789
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2790
+ color: var(--pf-v6-c-button__icon--Color);
2791
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2792
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2793
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2794
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2795
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2796
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2806
2797
  }
2807
2798
 
2808
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2809
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2810
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2811
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2799
+ .pf-v6-c-button__icon.pf-m-start {
2800
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2812
2801
  }
2813
2802
 
2814
- .pf-v6-c-text-input-group__text {
2815
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2816
- display: inline-grid;
2817
- flex: 1;
2818
- grid-template-areas: "text-input";
2819
- grid-template-columns: 1fr;
2803
+ .pf-v6-c-button__icon.pf-m-end {
2804
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2820
2805
  }
2821
2806
 
2822
- .pf-v6-c-text-input-group__icon {
2823
- position: absolute;
2824
- inset-block-start: 50%;
2825
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2826
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2827
- color: var(--pf-v6-c-text-input-group__icon--Color);
2828
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2807
+ .pf-v6-c-button__icon-favorite,
2808
+ .pf-v6-c-button__icon-favorited {
2809
+ grid-area: 1/1/1/1;
2810
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2811
+ transition-property: opacity;
2829
2812
  }
2830
2813
 
2831
- .pf-v6-c-text-input-group__icon.pf-m-status {
2832
- inset-inline-start: auto;
2833
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2834
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2814
+ .pf-v6-c-button__icon-favorite {
2815
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2835
2816
  }
2836
2817
 
2837
- .pf-v6-c-text-input-group__text-input {
2838
- overflow: hidden;
2839
- text-overflow: ellipsis;
2840
- white-space: nowrap;
2841
- position: relative;
2842
- width: 100%;
2843
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2844
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2845
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2846
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2847
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2848
- color: var(--pf-v6-c-text-input-group__text-input--Color);
2849
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2850
- border: 0;
2851
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2818
+ .pf-v6-c-button__icon-favorited {
2819
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2852
2820
  }
2853
2821
 
2854
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2855
- grid-area: text-input;
2822
+ .pf-v6-c-button__progress {
2823
+ position: absolute;
2824
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2825
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2826
+ line-height: 1;
2827
+ color: var(--pf-v6-c-button__progress--Color);
2828
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2856
2829
  }
2857
2830
 
2858
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2859
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2831
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2832
+ --pf-v6-c-spinner--Color: currentcolor;
2860
2833
  }
2861
2834
 
2862
- .pf-v6-c-text-input-group__text-input::placeholder {
2863
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2835
+ .pf-v6-c-button__text {
2836
+ text-decoration: inherit;
2864
2837
  }
2865
2838
 
2866
- .pf-v6-c-text-input-group__utilities {
2867
- display: flex;
2839
+ .pf-v6-c-button__count {
2840
+ display: inline-flex;
2868
2841
  align-items: center;
2869
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2870
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2871
2842
  }
2872
2843
 
2873
- .pf-v6-c-text-input-group__utilities > * + * {
2874
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2844
+ .pf-v6-c-button--hamburger-icon path {
2845
+ fill: none;
2846
+ stroke: currentcolor;
2847
+ stroke-linecap: round;
2848
+ stroke-linejoin: round;
2849
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2850
+ }
2851
+
2852
+ .pf-v6-c-button--hamburger-icon--top {
2853
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2854
+ }
2855
+
2856
+ .pf-v6-c-button--hamburger-icon--middle {
2857
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2858
+ }
2859
+
2860
+ .pf-v6-c-button--hamburger-icon--arrow {
2861
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2875
2862
  }
2876
2863
 
2877
- .pf-v6-c-text-input-group__group {
2878
- display: flex;
2864
+ .pf-v6-c-button--hamburger-icon--bottom {
2865
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2879
2866
  }
2880
2867
 
2868
+ @keyframes pf-v6-c-button-icon-notify {
2869
+ 33% {
2870
+ transform: rotate(30deg);
2871
+ }
2872
+ 66% {
2873
+ transform: rotate(-60deg);
2874
+ }
2875
+ }
2876
+ @keyframes pf-v6-c-button-icon-favorited {
2877
+ 50% {
2878
+ scale: 1.5;
2879
+ }
2880
+ }
2881
2881
  .pf-v6-c-menu {
2882
2882
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2883
2883
  --pf-v6-c-menu--Width: auto;
@@ -3649,122 +3649,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3649
3649
  transform: rotate(720deg);
3650
3650
  }
3651
3651
  }
3652
- .pf-v6-c-breadcrumb {
3653
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3654
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3655
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3656
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3657
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3658
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3659
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3660
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3661
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3662
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3663
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3664
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3665
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3666
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3667
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3668
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3669
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3670
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3671
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3672
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3673
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3674
- }
3675
-
3676
- .pf-v6-c-breadcrumb {
3677
- display: inline-flex;
3678
- }
3679
-
3680
- .pf-v6-c-breadcrumb__list {
3681
- display: flex;
3682
- flex-wrap: wrap;
3683
- align-items: center;
3684
- }
3685
-
3686
- .pf-v6-c-breadcrumb__item {
3687
- display: flex;
3688
- align-items: baseline;
3689
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3690
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3691
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3692
- white-space: nowrap;
3693
- list-style: none;
3694
- }
3695
-
3696
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3697
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3698
- }
3699
-
3700
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3701
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3702
- }
3703
-
3704
- .pf-v6-c-breadcrumb__item-divider {
3705
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3706
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3707
- line-height: 1;
3708
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3709
- }
3710
-
3711
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3712
- scale: -1 1;
3713
- }
3714
-
3715
- .pf-v6-c-breadcrumb__link {
3716
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3717
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3718
- font-size: inherit;
3719
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3720
- line-height: inherit;
3721
- color: var(--pf-v6-c-breadcrumb__link--Color);
3722
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3723
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3724
- word-break: break-word;
3725
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3726
- }
3727
-
3728
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3729
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3730
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3731
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3732
- }
3733
-
3734
- .pf-v6-c-breadcrumb__link.pf-m-current {
3735
- cursor: default;
3736
- }
3737
-
3738
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3739
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3740
- text-decoration-line: none;
3741
- }
3742
-
3743
- button.pf-v6-c-breadcrumb__link {
3744
- border: none;
3745
- }
3746
-
3747
- .pf-v6-c-breadcrumb__dropdown {
3748
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3749
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3750
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3751
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3752
- }
3753
-
3754
- .pf-v6-c-breadcrumb__heading {
3755
- display: inline;
3756
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3757
- }
3758
-
3759
- .pf-v6-c-breadcrumb__link,
3760
- .pf-v6-c-breadcrumb__heading {
3761
- white-space: normal;
3762
- }
3763
-
3764
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3765
- display: none;
3766
- }
3767
-
3768
3652
  .pf-v6-c-tooltip {
3769
3653
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3770
3654
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3894,4 +3778,120 @@ button.pf-v6-c-breadcrumb__link {
3894
3778
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3895
3779
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3896
3780
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3781
+ }
3782
+
3783
+ .pf-v6-c-breadcrumb {
3784
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3785
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3786
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3787
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3788
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3789
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3790
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3791
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3792
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3793
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3794
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3795
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3796
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3797
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3798
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3799
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3800
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3801
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3802
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3803
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3804
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3805
+ }
3806
+
3807
+ .pf-v6-c-breadcrumb {
3808
+ display: inline-flex;
3809
+ }
3810
+
3811
+ .pf-v6-c-breadcrumb__list {
3812
+ display: flex;
3813
+ flex-wrap: wrap;
3814
+ align-items: center;
3815
+ }
3816
+
3817
+ .pf-v6-c-breadcrumb__item {
3818
+ display: flex;
3819
+ align-items: baseline;
3820
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3821
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3822
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3823
+ white-space: nowrap;
3824
+ list-style: none;
3825
+ }
3826
+
3827
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3828
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3829
+ }
3830
+
3831
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3832
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3833
+ }
3834
+
3835
+ .pf-v6-c-breadcrumb__item-divider {
3836
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3837
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3838
+ line-height: 1;
3839
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3840
+ }
3841
+
3842
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3843
+ scale: -1 1;
3844
+ }
3845
+
3846
+ .pf-v6-c-breadcrumb__link {
3847
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3848
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3849
+ font-size: inherit;
3850
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3851
+ line-height: inherit;
3852
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3853
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3854
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3855
+ word-break: break-word;
3856
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3857
+ }
3858
+
3859
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3860
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3861
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3862
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3863
+ }
3864
+
3865
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3866
+ cursor: default;
3867
+ }
3868
+
3869
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3870
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3871
+ text-decoration-line: none;
3872
+ }
3873
+
3874
+ button.pf-v6-c-breadcrumb__link {
3875
+ border: none;
3876
+ }
3877
+
3878
+ .pf-v6-c-breadcrumb__dropdown {
3879
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3880
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3881
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3882
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3883
+ }
3884
+
3885
+ .pf-v6-c-breadcrumb__heading {
3886
+ display: inline;
3887
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3888
+ }
3889
+
3890
+ .pf-v6-c-breadcrumb__link,
3891
+ .pf-v6-c-breadcrumb__heading {
3892
+ white-space: normal;
3893
+ }
3894
+
3895
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3896
+ display: none;
3897
3897
  }