@patternfly/patternfly 6.5.0-prerelease.63 → 6.5.0-prerelease.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/base/patternfly-svg-icons.css +6 -0
  2. package/base/patternfly-svg-icons.scss +6 -0
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Page/page.css +83 -34
  6. package/components/Page/page.scss +94 -39
  7. package/components/Table/table.css +2 -2
  8. package/components/Table/table.scss +2 -2
  9. package/components/_index.css +92 -37
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  11. package/docs/components/Page/examples/Page.md +62 -15
  12. package/docs/components/Table/examples/Table.md +1879 -151
  13. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  14. package/docs/demos/Alert/examples/Alert.md +24 -6
  15. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  16. package/docs/demos/Banner/examples/Banner.md +16 -4
  17. package/docs/demos/CardView/examples/CardView.md +8 -2
  18. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  19. package/docs/demos/DataList/examples/DataList.md +32 -8
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  21. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  23. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  24. package/docs/demos/Modal/examples/Modal.md +48 -12
  25. package/docs/demos/Nav/examples/Nav.md +80 -20
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  27. package/docs/demos/Page/examples/Page.md +113 -28
  28. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  29. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  30. package/docs/demos/Table/examples/Table.md +496 -64
  31. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  32. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  33. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  34. package/package.json +21 -1
  35. package/patternfly-base-no-globals.css +6 -0
  36. package/patternfly-base.css +6 -0
  37. package/patternfly-no-globals.css +99 -38
  38. package/patternfly.css +99 -38
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
  41. package/patternfly.scss +3 -1
package/components/_index.css CHANGED
@@ -3291,7 +3291,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3291
3291
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3292
3292
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
3293
3293
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3294
- --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3294
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
3295
3295
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
3296
3296
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
3297
3297
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
@@ -3299,6 +3299,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3299
3299
  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
3300
3300
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
3301
3301
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
3302
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
3303
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
3302
3304
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
3303
3305
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
3304
3306
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -3327,6 +3329,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3327
3329
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
3328
3330
  display: inline-flex;
3329
3331
  }
3332
+ .pf-v6-c-clipboard-copy.pf-m-readonly {
3333
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
3334
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
3335
+ }
3330
3336
 
3331
3337
  .pf-v6-c-clipboard-copy__group {
3332
3338
  display: flex;
@@ -13577,6 +13583,7 @@ ul.pf-v6-c-list {
13577
13583
  --pf-v6-c-page__sidebar--TranslateZ: 0;
13578
13584
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
13579
13585
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
13586
+ --pf-v6-c-page__sidebar--MarginBlockStart: 0;
13580
13587
  --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
13581
13588
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
13582
13589
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
@@ -13594,6 +13601,20 @@ ul.pf-v6-c-list {
13594
13601
  }
13595
13602
  }
13596
13603
  .pf-v6-c-page {
13604
+ --pf-v6-c-page__sidebar-main--PaddingBlockStart: 0;
13605
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0;
13606
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: 0;
13607
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0;
13608
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: 0;
13609
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: 0;
13610
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: 0;
13611
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: 0;
13612
+ --pf-v6-c-page__sidebar-main--BackgroundColor: transparent;
13613
+ --pf-v6-c-page__sidebar-main--BackdropFilter: none;
13614
+ --pf-v6-c-page__sidebar-main--BorderWidth: 0;
13615
+ --pf-v6-c-page__sidebar-main--BorderColor: transparent;
13616
+ --pf-v6-c-page__sidebar-main--BorderRadius: 0;
13617
+ --pf-v6-c-page__sidebar-main--BoxShadow: none;
13597
13618
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
13598
13619
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
13599
13620
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13664,6 +13685,10 @@ ul.pf-v6-c-list {
13664
13685
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13665
13686
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13666
13687
  --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
13688
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
13689
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
13690
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
13691
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
13667
13692
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
13668
13693
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
13669
13694
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -13706,11 +13731,54 @@ ul.pf-v6-c-list {
13706
13731
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13707
13732
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13708
13733
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13734
+ --pf-v6-c-page--BackgroundColor--glass: transparent;
13735
+ --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13736
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
13737
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
13738
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13739
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13740
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13741
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
13742
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
13743
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
13744
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
13745
+ --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
13746
+ --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
13747
+ --pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
13748
+ --pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
13749
+ --pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
13750
+ --pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
13751
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
13752
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13753
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13754
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13709
13755
  }
13710
13756
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13711
- --pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13712
- --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13713
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13757
+ --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
13758
+ --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
13759
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
13760
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
13761
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
13762
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass);
13763
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass);
13764
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass);
13765
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass);
13766
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass);
13767
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass);
13768
+ --pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass);
13769
+ --pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass);
13770
+ --pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass);
13771
+ --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
13772
+ --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
13773
+ --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13774
+ }
13775
+ @media (min-width: 75rem) {
13776
+ .pf-v6-c-page {
13777
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass);
13778
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass);
13779
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass);
13780
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass);
13781
+ }
13714
13782
  }
13715
13783
 
13716
13784
  .pf-v6-c-page {
@@ -13723,9 +13791,6 @@ ul.pf-v6-c-list {
13723
13791
  max-height: 100%;
13724
13792
  background-color: var(--pf-v6-c-page--BackgroundColor);
13725
13793
  }
13726
- :where(:root.pf-v6-theme-glass) .pf-v6-c-page {
13727
- background-color: transparent;
13728
- }
13729
13794
  @media (min-width: 75rem) {
13730
13795
  .pf-v6-c-page {
13731
13796
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
@@ -13875,6 +13940,7 @@ ul.pf-v6-c-list {
13875
13940
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13876
13941
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13877
13942
  padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13943
+ margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart);
13878
13944
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
13879
13945
  overflow-x: hidden;
13880
13946
  overflow-y: auto;
@@ -13906,44 +13972,33 @@ ul.pf-v6-c-list {
13906
13972
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
13907
13973
  min-height: 0;
13908
13974
  padding: 0;
13909
- overflow: visible;
13975
+ overflow: revert;
13910
13976
  background: transparent;
13911
13977
  }
13912
13978
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
13913
13979
  box-shadow: none;
13914
13980
  }
13915
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13916
- padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13917
- padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13918
- padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13919
- margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
13920
- margin-block-end: var(--pf-t--global--spacer--md);
13921
- margin-inline-start: var(--pf-t--global--spacer--md);
13922
- margin-inline-end: var(--pf-t--global--spacer--md);
13981
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main {
13923
13982
  overflow: auto;
13924
- background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
13925
- backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
13926
- border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
13927
- border-radius: var(--pf-t--global--border--radius--glass--default);
13928
- box-shadow: var(--pf-t--global--box-shadow--glass--default);
13929
- }
13930
- @media (min-width: 75rem) {
13931
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13932
- margin-block-start: 0;
13933
- margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
13934
- margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
13935
- margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
13936
- }
13937
- }
13938
-
13939
- .pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
13940
- overflow: revert;
13941
13983
  }
13942
13984
 
13943
13985
  .pf-v6-c-page__sidebar-main {
13944
13986
  display: flex;
13945
13987
  flex-grow: 1;
13946
13988
  flex-direction: column;
13989
+ padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart);
13990
+ padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd);
13991
+ padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart);
13992
+ padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd);
13993
+ margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart);
13994
+ margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd);
13995
+ margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
13996
+ margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
13997
+ background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
13998
+ backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
13999
+ border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
14000
+ border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
14001
+ box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
13947
14002
  }
13948
14003
 
13949
14004
  .pf-v6-c-page__sidebar-header {
@@ -14371,8 +14426,8 @@ ul.pf-v6-c-list {
14371
14426
  }
14372
14427
  .pf-v6-c-page__main-section.pf-m-secondary {
14373
14428
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
14374
- border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
14375
- border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
14429
+ border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor);
14430
+ border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor);
14376
14431
  }
14377
14432
  .pf-v6-c-page__main-section.pf-m-padding {
14378
14433
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
@@ -18914,7 +18969,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18914
18969
  --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
18915
18970
  --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
18916
18971
  --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
18917
- --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
18972
+ --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
18918
18973
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
18919
18974
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18920
18975
  --pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -19009,7 +19064,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19009
19064
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
19010
19065
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
19011
19066
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
19012
- --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19067
+ --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
19013
19068
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
19014
19069
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
19015
19070
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -26,7 +26,7 @@ cssPrefix: pf-v6-c-clipboard-copy
26
26
  <span class="pf-v6-c-button__icon">
27
27
  <svg
28
28
  class="pf-v6-svg"
29
- viewBox="0 0 448 512"
29
+ viewBox="0 0 32 32"
30
30
  fill="currentColor"
31
31
  aria-hidden="true"
32
32
  role="img"
@@ -34,7 +34,7 @@ cssPrefix: pf-v6-c-clipboard-copy
34
34
  height="1em"
35
35
  >
36
36
  <path
37
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
37
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
38
38
  />
39
39
  </svg>
40
40
  </span>
@@ -42,7 +42,7 @@ cssPrefix: pf-v6-c-clipboard-copy
42
42
  </div>
43
43
  </div>
44
44
  <br />
45
- <div class="pf-v6-c-clipboard-copy">
45
+ <div class="pf-v6-c-clipboard-copy pf-m-readonly">
46
46
  <div class="pf-v6-c-clipboard-copy__group">
47
47
  <span class="pf-v6-c-form-control pf-m-readonly">
48
48
  <input
@@ -62,7 +62,7 @@ cssPrefix: pf-v6-c-clipboard-copy
62
62
  <span class="pf-v6-c-button__icon">
63
63
  <svg
64
64
  class="pf-v6-svg"
65
- viewBox="0 0 448 512"
65
+ viewBox="0 0 32 32"
66
66
  fill="currentColor"
67
67
  aria-hidden="true"
68
68
  role="img"
@@ -70,7 +70,7 @@ cssPrefix: pf-v6-c-clipboard-copy
70
70
  height="1em"
71
71
  >
72
72
  <path
73
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
73
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
74
74
  />
75
75
  </svg>
76
76
  </span>
@@ -129,7 +129,7 @@ cssPrefix: pf-v6-c-clipboard-copy
129
129
  <span class="pf-v6-c-button__icon">
130
130
  <svg
131
131
  class="pf-v6-svg"
132
- viewBox="0 0 448 512"
132
+ viewBox="0 0 32 32"
133
133
  fill="currentColor"
134
134
  aria-hidden="true"
135
135
  role="img"
@@ -137,7 +137,7 @@ cssPrefix: pf-v6-c-clipboard-copy
137
137
  height="1em"
138
138
  >
139
139
  <path
140
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
140
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
141
141
  />
142
142
  </svg>
143
143
  </span>
@@ -196,7 +196,7 @@ cssPrefix: pf-v6-c-clipboard-copy
196
196
  <span class="pf-v6-c-button__icon">
197
197
  <svg
198
198
  class="pf-v6-svg"
199
- viewBox="0 0 448 512"
199
+ viewBox="0 0 32 32"
200
200
  fill="currentColor"
201
201
  aria-hidden="true"
202
202
  role="img"
@@ -204,7 +204,7 @@ cssPrefix: pf-v6-c-clipboard-copy
204
204
  height="1em"
205
205
  >
206
206
  <path
207
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
207
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
208
208
  />
209
209
  </svg>
210
210
  </span>
@@ -218,7 +218,7 @@ cssPrefix: pf-v6-c-clipboard-copy
218
218
  </div>
219
219
  <br />
220
220
  <h4>Read-only</h4>
221
- <div class="pf-v6-c-clipboard-copy">
221
+ <div class="pf-v6-c-clipboard-copy pf-m-readonly">
222
222
  <div class="pf-v6-c-clipboard-copy__group">
223
223
  <button
224
224
  class="pf-v6-c-button pf-m-control"
@@ -250,7 +250,7 @@ cssPrefix: pf-v6-c-clipboard-copy
250
250
  <input
251
251
  readonly
252
252
  type="text"
253
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
253
+ value="This is a read-only version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
254
254
  id="expandable-not-expanded-readonly-text-input"
255
255
  aria-label="Copyable input"
256
256
  />
@@ -264,7 +264,7 @@ cssPrefix: pf-v6-c-clipboard-copy
264
264
  <span class="pf-v6-c-button__icon">
265
265
  <svg
266
266
  class="pf-v6-svg"
267
- viewBox="0 0 448 512"
267
+ viewBox="0 0 32 32"
268
268
  fill="currentColor"
269
269
  aria-hidden="true"
270
270
  role="img"
@@ -272,7 +272,7 @@ cssPrefix: pf-v6-c-clipboard-copy
272
272
  height="1em"
273
273
  >
274
274
  <path
275
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
275
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
276
276
  />
277
277
  </svg>
278
278
  </span>
@@ -285,7 +285,7 @@ cssPrefix: pf-v6-c-clipboard-copy
285
285
  >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
286
286
  </div>
287
287
  <br />
288
- <div class="pf-v6-c-clipboard-copy pf-m-expanded">
288
+ <div class="pf-v6-c-clipboard-copy pf-m-expanded pf-m-readonly">
289
289
  <div class="pf-v6-c-clipboard-copy__group">
290
290
  <button
291
291
  class="pf-v6-c-button pf-m-control"
@@ -317,7 +317,7 @@ cssPrefix: pf-v6-c-clipboard-copy
317
317
  <input
318
318
  readonly
319
319
  type="text"
320
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
320
+ value="This is a read-only version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
321
321
  id="expandable-expanded-readonly-text-input"
322
322
  aria-label="Copyable input"
323
323
  />
@@ -331,7 +331,7 @@ cssPrefix: pf-v6-c-clipboard-copy
331
331
  <span class="pf-v6-c-button__icon">
332
332
  <svg
333
333
  class="pf-v6-svg"
334
- viewBox="0 0 448 512"
334
+ viewBox="0 0 32 32"
335
335
  fill="currentColor"
336
336
  aria-hidden="true"
337
337
  role="img"
@@ -339,7 +339,7 @@ cssPrefix: pf-v6-c-clipboard-copy
339
339
  height="1em"
340
340
  >
341
341
  <path
342
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
342
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
343
343
  />
344
344
  </svg>
345
345
  </span>
@@ -348,7 +348,7 @@ cssPrefix: pf-v6-c-clipboard-copy
348
348
  <div
349
349
  class="pf-v6-c-clipboard-copy__expandable-content"
350
350
  id="expandable-expanded-readonly-content"
351
- >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
351
+ >This is a read-only version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
352
352
  </div>
353
353
  <br />
354
354
  <h4>Code</h4>
@@ -398,7 +398,7 @@ cssPrefix: pf-v6-c-clipboard-copy
398
398
  <span class="pf-v6-c-button__icon">
399
399
  <svg
400
400
  class="pf-v6-svg"
401
- viewBox="0 0 448 512"
401
+ viewBox="0 0 32 32"
402
402
  fill="currentColor"
403
403
  aria-hidden="true"
404
404
  role="img"
@@ -406,7 +406,7 @@ cssPrefix: pf-v6-c-clipboard-copy
406
406
  height="1em"
407
407
  >
408
408
  <path
409
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
409
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
410
410
  />
411
411
  </svg>
412
412
  </span>
@@ -479,7 +479,7 @@ cssPrefix: pf-v6-c-clipboard-copy
479
479
  <span class="pf-v6-c-button__icon">
480
480
  <svg
481
481
  class="pf-v6-svg"
482
- viewBox="0 0 448 512"
482
+ viewBox="0 0 32 32"
483
483
  fill="currentColor"
484
484
  aria-hidden="true"
485
485
  role="img"
@@ -487,7 +487,7 @@ cssPrefix: pf-v6-c-clipboard-copy
487
487
  height="1em"
488
488
  >
489
489
  <path
490
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
490
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
491
491
  />
492
492
  </svg>
493
493
  </span>
@@ -530,7 +530,7 @@ cssPrefix: pf-v6-c-clipboard-copy
530
530
  <span class="pf-v6-c-button__icon">
531
531
  <svg
532
532
  class="pf-v6-svg"
533
- viewBox="0 0 448 512"
533
+ viewBox="0 0 32 32"
534
534
  fill="currentColor"
535
535
  aria-hidden="true"
536
536
  role="img"
@@ -538,7 +538,7 @@ cssPrefix: pf-v6-c-clipboard-copy
538
538
  height="1em"
539
539
  >
540
540
  <path
541
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
541
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
542
542
  />
543
543
  </svg>
544
544
  </span>
@@ -564,7 +564,7 @@ cssPrefix: pf-v6-c-clipboard-copy
564
564
  <span class="pf-v6-c-button__icon">
565
565
  <svg
566
566
  class="pf-v6-svg"
567
- viewBox="0 0 448 512"
567
+ viewBox="0 0 32 32"
568
568
  fill="currentColor"
569
569
  aria-hidden="true"
570
570
  role="img"
@@ -572,7 +572,7 @@ cssPrefix: pf-v6-c-clipboard-copy
572
572
  height="1em"
573
573
  >
574
574
  <path
575
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
575
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
576
576
  />
577
577
  </svg>
578
578
  </span>
@@ -598,7 +598,7 @@ cssPrefix: pf-v6-c-clipboard-copy
598
598
  <span class="pf-v6-c-button__icon">
599
599
  <svg
600
600
  class="pf-v6-svg"
601
- viewBox="0 0 448 512"
601
+ viewBox="0 0 32 32"
602
602
  fill="currentColor"
603
603
  aria-hidden="true"
604
604
  role="img"
@@ -606,7 +606,7 @@ cssPrefix: pf-v6-c-clipboard-copy
606
606
  height="1em"
607
607
  >
608
608
  <path
609
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
609
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
610
610
  />
611
611
  </svg>
612
612
  </span>
@@ -621,7 +621,7 @@ cssPrefix: pf-v6-c-clipboard-copy
621
621
  <span class="pf-v6-c-button__icon">
622
622
  <svg
623
623
  class="pf-v6-svg"
624
- viewBox="0 0 448 512"
624
+ viewBox="0 0 32 32"
625
625
  fill="currentColor"
626
626
  aria-hidden="true"
627
627
  role="img"
@@ -629,7 +629,7 @@ cssPrefix: pf-v6-c-clipboard-copy
629
629
  height="1em"
630
630
  >
631
631
  <path
632
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
632
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
633
633
  />
634
634
  </svg>
635
635
  </span>
@@ -658,7 +658,7 @@ cssPrefix: pf-v6-c-clipboard-copy
658
658
  <span class="pf-v6-c-button__icon">
659
659
  <svg
660
660
  class="pf-v6-svg"
661
- viewBox="0 0 448 512"
661
+ viewBox="0 0 32 32"
662
662
  fill="currentColor"
663
663
  aria-hidden="true"
664
664
  role="img"
@@ -666,7 +666,7 @@ cssPrefix: pf-v6-c-clipboard-copy
666
666
  height="1em"
667
667
  >
668
668
  <path
669
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
669
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
670
670
  />
671
671
  </svg>
672
672
  </span>
@@ -695,7 +695,7 @@ cssPrefix: pf-v6-c-clipboard-copy
695
695
  <span class="pf-v6-c-button__icon">
696
696
  <svg
697
697
  class="pf-v6-svg"
698
- viewBox="0 0 448 512"
698
+ viewBox="0 0 32 32"
699
699
  fill="currentColor"
700
700
  aria-hidden="true"
701
701
  role="img"
@@ -703,7 +703,7 @@ cssPrefix: pf-v6-c-clipboard-copy
703
703
  height="1em"
704
704
  >
705
705
  <path
706
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
706
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
707
707
  />
708
708
  </svg>
709
709
  </span>
@@ -731,7 +731,7 @@ cssPrefix: pf-v6-c-clipboard-copy
731
731
  <span class="pf-v6-c-button__icon">
732
732
  <svg
733
733
  class="pf-v6-svg"
734
- viewBox="0 0 448 512"
734
+ viewBox="0 0 32 32"
735
735
  fill="currentColor"
736
736
  aria-hidden="true"
737
737
  role="img"
@@ -739,7 +739,7 @@ cssPrefix: pf-v6-c-clipboard-copy
739
739
  height="1em"
740
740
  >
741
741
  <path
742
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
742
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
743
743
  />
744
744
  </svg>
745
745
  </span>
@@ -771,7 +771,7 @@ cssPrefix: pf-v6-c-clipboard-copy
771
771
  <span class="pf-v6-c-button__icon">
772
772
  <svg
773
773
  class="pf-v6-svg"
774
- viewBox="0 0 448 512"
774
+ viewBox="0 0 32 32"
775
775
  fill="currentColor"
776
776
  aria-hidden="true"
777
777
  role="img"
@@ -779,7 +779,7 @@ cssPrefix: pf-v6-c-clipboard-copy
779
779
  height="1em"
780
780
  >
781
781
  <path
782
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
782
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
783
783
  />
784
784
  </svg>
785
785
  </span>
@@ -818,5 +818,6 @@ cssPrefix: pf-v6-c-clipboard-copy
818
818
  | `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
819
819
  | `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
820
820
  | `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
821
+ | `.pf-m-readonly` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for read-only styles. |
821
822
  | `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
822
823
  | `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |