@rocket.chat/fuselage 0.94.0 → 0.96.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/Theme.d.ts.map +1 -1
  2. package/dist/components/ButtonGroup/ButtonGroup.d.ts +3 -18
  3. package/dist/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  4. package/dist/components/Item/Item.d.ts +32 -0
  5. package/dist/components/Item/Item.d.ts.map +1 -0
  6. package/dist/components/Item/ItemActions.d.ts +16 -0
  7. package/dist/components/Item/ItemActions.d.ts.map +1 -0
  8. package/dist/components/Item/ItemContent.d.ts +10 -0
  9. package/dist/components/Item/ItemContent.d.ts.map +1 -0
  10. package/dist/components/Item/ItemContext.d.ts +7 -0
  11. package/dist/components/Item/ItemContext.d.ts.map +1 -0
  12. package/dist/components/Item/ItemDescription.d.ts +15 -0
  13. package/dist/components/Item/ItemDescription.d.ts.map +1 -0
  14. package/dist/components/Item/ItemDivider.d.ts +19 -0
  15. package/dist/components/Item/ItemDivider.d.ts.map +1 -0
  16. package/dist/components/Item/ItemGroup.d.ts +13 -0
  17. package/dist/components/Item/ItemGroup.d.ts.map +1 -0
  18. package/dist/components/Item/ItemGroupContext.d.ts +6 -0
  19. package/dist/components/Item/ItemGroupContext.d.ts.map +1 -0
  20. package/dist/components/Item/ItemGroupHeader.d.ts +24 -0
  21. package/dist/components/Item/ItemGroupHeader.d.ts.map +1 -0
  22. package/dist/components/Item/ItemGroupTitle.d.ts +13 -0
  23. package/dist/components/Item/ItemGroupTitle.d.ts.map +1 -0
  24. package/dist/components/Item/ItemIcon.d.ts +15 -0
  25. package/dist/components/Item/ItemIcon.d.ts.map +1 -0
  26. package/dist/components/Item/ItemLink.d.ts +15 -0
  27. package/dist/components/Item/ItemLink.d.ts.map +1 -0
  28. package/dist/components/Item/ItemMedia.d.ts +14 -0
  29. package/dist/components/Item/ItemMedia.d.ts.map +1 -0
  30. package/dist/components/Item/ItemMeta.d.ts +10 -0
  31. package/dist/components/Item/ItemMeta.d.ts.map +1 -0
  32. package/dist/components/Item/ItemRow.d.ts +10 -0
  33. package/dist/components/Item/ItemRow.d.ts.map +1 -0
  34. package/dist/components/Item/ItemSkeleton.d.ts +18 -0
  35. package/dist/components/Item/ItemSkeleton.d.ts.map +1 -0
  36. package/dist/components/Item/ItemTitle.d.ts +10 -0
  37. package/dist/components/Item/ItemTitle.d.ts.map +1 -0
  38. package/dist/components/Item/index.d.ts +17 -0
  39. package/dist/components/Item/index.d.ts.map +1 -0
  40. package/dist/components/Item/types.d.ts +2 -0
  41. package/dist/components/Item/types.d.ts.map +1 -0
  42. package/dist/components/Item/useIdRegistry.d.ts +6 -0
  43. package/dist/components/Item/useIdRegistry.d.ts.map +1 -0
  44. package/dist/components/PaletteStyleTag/helpers/getPalette.d.ts +4 -4
  45. package/dist/components/SplitButton/SplitButton.d.ts +19 -0
  46. package/dist/components/SplitButton/SplitButton.d.ts.map +1 -0
  47. package/dist/components/SplitButton/SplitButtonTrigger.d.ts +9 -0
  48. package/dist/components/SplitButton/SplitButtonTrigger.d.ts.map +1 -0
  49. package/dist/components/SplitButton/index.d.ts +3 -0
  50. package/dist/components/SplitButton/index.d.ts.map +1 -0
  51. package/dist/components/Tag/Tag.d.ts +5 -1
  52. package/dist/components/Tag/Tag.d.ts.map +1 -1
  53. package/dist/components/index.d.ts +2 -0
  54. package/dist/components/index.d.ts.map +1 -1
  55. package/dist/fuselage.css +1 -1
  56. package/dist/fuselage.development.css +492 -85
  57. package/dist/fuselage.development.js +315 -8
  58. package/dist/fuselage.development.js.map +1 -1
  59. package/dist/fuselage.production.js +52 -52
  60. package/package.json +4 -4
@@ -44,10 +44,10 @@
44
44
  /**
45
45
  * Do not edit directly, this file was auto-generated.
46
46
  */
47
- a:where(:not(.rcx-button)), .rcx-tag--clickable.rcx-tag--clickable, .rcx-sidebar-item, .rcx-sidebar-link, .rcx-message-generic-preview__title-link, .rcx-message-generic-preview__footer a, .rcx-field__description a, .rcx-field__hint a, .rcx-field__error a, .rcx-field__link a, .rcx-states__link a, .rcx-box--with-inline-elements a {
47
+ a:where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable.rcx-tag--clickable, .rcx-sidebar-item, .rcx-sidebar-link, .rcx-message-generic-preview__title-link, .rcx-message-generic-preview__footer a, .rcx-field__description a, .rcx-field__hint a, .rcx-field__error a, .rcx-field__link a, .rcx-states__link a, .rcx-box--with-inline-elements a {
48
48
  color: var(--rcx-link-color, var(--rcx-color-font-info, #095ad2));
49
49
  }
50
- a:focus-visible:where(:not(.rcx-button)), .rcx-tag--clickable:focus-visible, .rcx-sidebar-item:focus-visible, .rcx-sidebar-link:focus-visible, .rcx-message-generic-preview__title-link:focus-visible, .rcx-message-generic-preview__footer a:focus-visible, .rcx-field__description a:focus-visible, .rcx-field__hint a:focus-visible, .rcx-field__error a:focus-visible, .rcx-field__link a:focus-visible, .rcx-states__link a:focus-visible, .rcx-box--with-inline-elements a:focus-visible, a.is-focused:where(:not(.rcx-button)), .is-focused.rcx-tag--clickable, .is-focused.rcx-sidebar-item, .is-focused.rcx-sidebar-link, .is-focused.rcx-message-generic-preview__title-link, .rcx-message-generic-preview__footer a.is-focused, .rcx-field__description a.is-focused, .rcx-field__hint a.is-focused, .rcx-field__error a.is-focused, .rcx-field__link a.is-focused, .rcx-states__link a.is-focused, .rcx-box--with-inline-elements a.is-focused, a.focus:where(:not(.rcx-button)), .focus.rcx-tag--clickable, .focus.rcx-sidebar-item, .focus.rcx-sidebar-link, .focus.rcx-message-generic-preview__title-link, .rcx-message-generic-preview__footer a.focus, .rcx-field__description a.focus, .rcx-field__hint a.focus, .rcx-field__error a.focus, .rcx-field__link a.focus, .rcx-states__link a.focus, .rcx-box--with-inline-elements a.focus {
50
+ a:focus-visible:where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable:focus-visible, .rcx-sidebar-item:focus-visible, .rcx-sidebar-link:focus-visible, .rcx-message-generic-preview__title-link:focus-visible, .rcx-message-generic-preview__footer a:focus-visible, .rcx-field__description a:focus-visible, .rcx-field__hint a:focus-visible, .rcx-field__error a:focus-visible, .rcx-field__link a:focus-visible, .rcx-states__link a:focus-visible, .rcx-box--with-inline-elements a:focus-visible, a.is-focused:where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .is-focused.rcx-tag--clickable, .is-focused.rcx-sidebar-item, .is-focused.rcx-sidebar-link, .is-focused.rcx-message-generic-preview__title-link, .rcx-message-generic-preview__footer a.is-focused, .rcx-field__description a.is-focused, .rcx-field__hint a.is-focused, .rcx-field__error a.is-focused, .rcx-field__link a.is-focused, .rcx-states__link a.is-focused, .rcx-box--with-inline-elements a.is-focused, a.focus:where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .focus.rcx-tag--clickable, .focus.rcx-sidebar-item, .focus.rcx-sidebar-link, .focus.rcx-message-generic-preview__title-link, .rcx-message-generic-preview__footer a.focus, .rcx-field__description a.focus, .rcx-field__hint a.focus, .rcx-field__error a.focus, .rcx-field__link a.focus, .rcx-states__link a.focus, .rcx-box--with-inline-elements a.focus {
51
51
  text-decoration: none;
52
52
  color: var(--rcx-link-focus-color, var(--rcx-color-font-info, #095ad2));
53
53
  border-radius: var(--rcx-border-radius-small, 0.125rem);
@@ -55,10 +55,10 @@ a:focus-visible:where(:not(.rcx-button)), .rcx-tag--clickable:focus-visible, .rc
55
55
  outline-offset: 0;
56
56
  box-shadow: 0 0 0 2px var(--rcx-link-focus-box-shadow-color, var(--rcx-color-stroke-extra-light-highlight, #d1ebfe));
57
57
  }
58
- a:where(:visited):where(:not(.rcx-button)), .rcx-tag--clickable:where(:visited), .rcx-tag--primary.rcx-tag--clickable:where(:visited), .rcx-tag--secondary.rcx-tag--clickable:where(:visited), .rcx-tag--danger.rcx-tag--clickable:where(:visited), .rcx-tag--warning.rcx-tag--clickable:where(:visited), .rcx-tag--featured.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-danger.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-warning.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-info.rcx-tag--clickable:where(:visited), .rcx-sidebar-item:where(:visited), .rcx-sidebar-link:where(:visited), .rcx-message-generic-preview__title-link:where(:visited), .rcx-message-generic-preview__footer a:where(:visited), .rcx-field__description a:where(:visited), .rcx-field__hint a:where(:visited), .rcx-field__error a:where(:visited), .rcx-field__link a:where(:visited), .rcx-states__link a:where(:visited), .rcx-box--with-inline-elements a:where(:visited), a:where(.is-visited):where(:not(.rcx-button)), .rcx-tag--clickable:where(.is-visited), .rcx-tag--primary.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary.rcx-tag--clickable:where(.is-visited), .rcx-tag--danger.rcx-tag--clickable:where(.is-visited), .rcx-tag--warning.rcx-tag--clickable:where(.is-visited), .rcx-tag--featured.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary-danger.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary-info.rcx-tag--clickable:where(.is-visited), .rcx-sidebar-item:where(.is-visited), .rcx-sidebar-link:where(.is-visited), .rcx-message-generic-preview__title-link:where(.is-visited), .rcx-message-generic-preview__footer a:where(.is-visited), .rcx-field__description a:where(.is-visited), .rcx-field__hint a:where(.is-visited), .rcx-field__error a:where(.is-visited), .rcx-field__link a:where(.is-visited), .rcx-states__link a:where(.is-visited), .rcx-box--with-inline-elements a:where(.is-visited) {
58
+ a:where(:visited):where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable:where(:visited), .rcx-tag--primary.rcx-tag--clickable:where(:visited), .rcx-tag--secondary.rcx-tag--clickable:where(:visited), .rcx-tag--danger.rcx-tag--clickable:where(:visited), .rcx-tag--warning.rcx-tag--clickable:where(:visited), .rcx-tag--featured.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-danger.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-warning.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-info.rcx-tag--clickable:where(:visited), .rcx-sidebar-item:where(:visited), .rcx-sidebar-link:where(:visited), .rcx-message-generic-preview__title-link:where(:visited), .rcx-message-generic-preview__footer a:where(:visited), .rcx-field__description a:where(:visited), .rcx-field__hint a:where(:visited), .rcx-field__error a:where(:visited), .rcx-field__link a:where(:visited), .rcx-states__link a:where(:visited), .rcx-box--with-inline-elements a:where(:visited), a:where(.is-visited):where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable:where(.is-visited), .rcx-tag--primary.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary.rcx-tag--clickable:where(.is-visited), .rcx-tag--danger.rcx-tag--clickable:where(.is-visited), .rcx-tag--warning.rcx-tag--clickable:where(.is-visited), .rcx-tag--featured.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary-danger.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.is-visited), .rcx-tag--secondary-info.rcx-tag--clickable:where(.is-visited), .rcx-sidebar-item:where(.is-visited), .rcx-sidebar-link:where(.is-visited), .rcx-message-generic-preview__title-link:where(.is-visited), .rcx-message-generic-preview__footer a:where(.is-visited), .rcx-field__description a:where(.is-visited), .rcx-field__hint a:where(.is-visited), .rcx-field__error a:where(.is-visited), .rcx-field__link a:where(.is-visited), .rcx-states__link a:where(.is-visited), .rcx-box--with-inline-elements a:where(.is-visited) {
59
59
  color: var(--rcx-link-visited-color, var(--rcx-color-font-info, #095ad2));
60
60
  }
61
- a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .rcx-tag--primary.rcx-tag--clickable:where(:active), .rcx-tag--secondary.rcx-tag--clickable:where(:active), .rcx-tag--danger.rcx-tag--clickable:where(:active), .rcx-tag--warning.rcx-tag--clickable:where(:active), .rcx-tag--featured.rcx-tag--clickable:where(:active), .rcx-tag--secondary-danger.rcx-tag--clickable:where(:active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(:active), .rcx-tag--secondary-info.rcx-tag--clickable:where(:active), .rcx-sidebar-item:where(:active), .rcx-sidebar-link:where(:active), .rcx-message-generic-preview__title-link:where(:active), .rcx-message-generic-preview__footer a:where(:active), .rcx-field__description a:where(:active), .rcx-field__hint a:where(:active), .rcx-field__error a:where(:active), .rcx-field__link a:where(:active), .rcx-states__link a:where(:active), .rcx-box--with-inline-elements a:where(:active), a:where(.active):where(:not(.rcx-button)), .rcx-tag--clickable:where(.active), .rcx-tag--primary.rcx-tag--clickable:where(.active), .rcx-tag--secondary.rcx-tag--clickable:where(.active), .rcx-tag--danger.rcx-tag--clickable:where(.active), .rcx-tag--warning.rcx-tag--clickable:where(.active), .rcx-tag--featured.rcx-tag--clickable:where(.active), .rcx-tag--secondary-danger.rcx-tag--clickable:where(.active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.active), .rcx-tag--secondary-info.rcx-tag--clickable:where(.active), .rcx-sidebar-item:where(.active), .rcx-sidebar-link:where(.active), .rcx-message-generic-preview__title-link:where(.active), .rcx-message-generic-preview__footer a:where(.active), .rcx-field__description a:where(.active), .rcx-field__hint a:where(.active), .rcx-field__error a:where(.active), .rcx-field__link a:where(.active), .rcx-states__link a:where(.active), .rcx-box--with-inline-elements a:where(.active), a:where(.is-active):where(:not(.rcx-button)), .rcx-tag--clickable:where(.is-active), .rcx-tag--primary.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary.rcx-tag--clickable:where(.is-active), .rcx-tag--danger.rcx-tag--clickable:where(.is-active), .rcx-tag--warning.rcx-tag--clickable:where(.is-active), .rcx-tag--featured.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary-danger.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary-info.rcx-tag--clickable:where(.is-active), .rcx-sidebar-item:where(.is-active), .rcx-sidebar-link:where(.is-active), .rcx-message-generic-preview__title-link:where(.is-active), .rcx-message-generic-preview__footer a:where(.is-active), .rcx-field__description a:where(.is-active), .rcx-field__hint a:where(.is-active), .rcx-field__error a:where(.is-active), .rcx-field__link a:where(.is-active), .rcx-states__link a:where(.is-active), .rcx-box--with-inline-elements a:where(.is-active) {
61
+ a:where(:active):where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable:where(:active), .rcx-tag--primary.rcx-tag--clickable:where(:active), .rcx-tag--secondary.rcx-tag--clickable:where(:active), .rcx-tag--danger.rcx-tag--clickable:where(:active), .rcx-tag--warning.rcx-tag--clickable:where(:active), .rcx-tag--featured.rcx-tag--clickable:where(:active), .rcx-tag--secondary-danger.rcx-tag--clickable:where(:active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(:active), .rcx-tag--secondary-info.rcx-tag--clickable:where(:active), .rcx-sidebar-item:where(:active), .rcx-sidebar-link:where(:active), .rcx-message-generic-preview__title-link:where(:active), .rcx-message-generic-preview__footer a:where(:active), .rcx-field__description a:where(:active), .rcx-field__hint a:where(:active), .rcx-field__error a:where(:active), .rcx-field__link a:where(:active), .rcx-states__link a:where(:active), .rcx-box--with-inline-elements a:where(:active), a:where(.active):where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable:where(.active), .rcx-tag--primary.rcx-tag--clickable:where(.active), .rcx-tag--secondary.rcx-tag--clickable:where(.active), .rcx-tag--danger.rcx-tag--clickable:where(.active), .rcx-tag--warning.rcx-tag--clickable:where(.active), .rcx-tag--featured.rcx-tag--clickable:where(.active), .rcx-tag--secondary-danger.rcx-tag--clickable:where(.active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.active), .rcx-tag--secondary-info.rcx-tag--clickable:where(.active), .rcx-sidebar-item:where(.active), .rcx-sidebar-link:where(.active), .rcx-message-generic-preview__title-link:where(.active), .rcx-message-generic-preview__footer a:where(.active), .rcx-field__description a:where(.active), .rcx-field__hint a:where(.active), .rcx-field__error a:where(.active), .rcx-field__link a:where(.active), .rcx-states__link a:where(.active), .rcx-box--with-inline-elements a:where(.active), a:where(.is-active):where(:not(.rcx-button, .rcx-item, .rcx-item__link)), .rcx-tag--clickable:where(.is-active), .rcx-tag--primary.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary.rcx-tag--clickable:where(.is-active), .rcx-tag--danger.rcx-tag--clickable:where(.is-active), .rcx-tag--warning.rcx-tag--clickable:where(.is-active), .rcx-tag--featured.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary-danger.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.is-active), .rcx-tag--secondary-info.rcx-tag--clickable:where(.is-active), .rcx-sidebar-item:where(.is-active), .rcx-sidebar-link:where(.is-active), .rcx-message-generic-preview__title-link:where(.is-active), .rcx-message-generic-preview__footer a:where(.is-active), .rcx-field__description a:where(.is-active), .rcx-field__hint a:where(.is-active), .rcx-field__error a:where(.is-active), .rcx-field__link a:where(.is-active), .rcx-states__link a:where(.is-active), .rcx-box--with-inline-elements a:where(.is-active) {
62
62
  color: var(--rcx-link-active-color, var(--rcx-color-font-info, #095ad2));
63
63
  }
64
64
 
@@ -1271,7 +1271,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
1271
1271
  border-top-color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, #095ad2));
1272
1272
  }
1273
1273
  .rcx-banner--warning {
1274
- border-top-color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, #ac892f));
1274
+ border-top-color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, #895f00));
1275
1275
  }
1276
1276
  .rcx-banner--danger {
1277
1277
  border-top-color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, #9b1325));
@@ -1287,7 +1287,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
1287
1287
  color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, #095ad2));
1288
1288
  }
1289
1289
  .rcx-banner__icon--warning {
1290
- color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, #ac892f));
1290
+ color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, #895f00));
1291
1291
  }
1292
1292
  .rcx-banner__icon--danger {
1293
1293
  color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, #9b1325));
@@ -1436,11 +1436,10 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
1436
1436
  justify-content: center;
1437
1437
  align-items: center;
1438
1438
  height: 1.75rem;
1439
- padding-inline: 0.75rem;
1440
- padding-inline-end: 1rem;
1439
+ padding-inline: 0.5rem;
1441
1440
  border-radius: var(--rcx-border-radius-extra-large, 1.25rem);
1442
- -moz-column-gap: 0.5rem;
1443
- column-gap: 0.5rem;
1441
+ -moz-column-gap: 0.25rem;
1442
+ column-gap: 0.25rem;
1444
1443
  overflow: hidden;
1445
1444
  text-overflow: ellipsis;
1446
1445
  white-space: nowrap;
@@ -1450,8 +1449,8 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
1450
1449
  text-overflow: ellipsis;
1451
1450
  white-space: nowrap;
1452
1451
  }
1453
- .rcx-bubble:not(.rcx-bubble__group) .rcx-bubble__item {
1454
- padding-inline: 0.5rem;
1452
+ .rcx-bubble:not(.rcx-bubble__group) .rcx-bubble__button:has(> .rcx-icon), .rcx-bubble:not(.rcx-bubble__group) .rcx-bubble__item:has(> .rcx-icon) {
1453
+ padding-inline-end: 0.75rem;
1455
1454
  }
1456
1455
  .rcx-bubble--small .rcx-bubble__button, .rcx-bubble--small .rcx-bubble__item {
1457
1456
  letter-spacing: 0rem;
@@ -1761,7 +1760,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
1761
1760
  transform: none !important;
1762
1761
  }
1763
1762
  .rcx-button--icon-warning {
1764
- color: var(--rcx-color-button-icon-warning-color, var(--rcx-color-status-font-on-warning, #ac892f));
1763
+ color: var(--rcx-color-button-icon-warning-color, var(--rcx-color-status-font-on-warning, #895f00));
1765
1764
  border-width: var(--rcx-button-border-width, 1px);
1766
1765
  border-style: solid;
1767
1766
  border-color: var(--rcx-color-button-icon-warning-border-color, transparent);
@@ -2343,65 +2342,6 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
2343
2342
  .rcx-button-group--align-end {
2344
2343
  justify-content: flex-end;
2345
2344
  }
2346
- .rcx-button-group--joined {
2347
- overflow: hidden;
2348
- width: -moz-fit-content;
2349
- width: fit-content;
2350
- border-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
2351
- }
2352
- .rcx-button-group--joined.rcx-button-group--stretch {
2353
- width: auto;
2354
- }
2355
- .rcx-button-group--joined.rcx-button-group--align-center {
2356
- margin-inline: auto;
2357
- }
2358
- .rcx-button-group--joined.rcx-button-group--align-end {
2359
- margin-inline-start: auto;
2360
- }
2361
- .rcx-button-group--joined.rcx-button-group--vertical {
2362
- align-items: stretch;
2363
- }
2364
- .rcx-button-group--joined {
2365
- background-color: var(--rcx-button-group-joined-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-default, #e4e7ea) 60%, transparent));
2366
- gap: 0;
2367
- }
2368
- .rcx-button-group--joined .rcx-button {
2369
- border-radius: 0;
2370
- }
2371
- .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child {
2372
- color: var(--rcx-color-button-font-on-secondary, #1f2329);
2373
- border-color: transparent;
2374
- background-color: transparent;
2375
- }
2376
- .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child:focus-visible, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.focus.focus-visible {
2377
- border-color: transparent;
2378
- background-color: var(--rcx-button-ghost-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-focus, #e4e7ea) 60%, transparent));
2379
- }
2380
- .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child:hover, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.hover, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.is-hovered {
2381
- border-color: transparent;
2382
- background-color: var(--rcx-button-ghost-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-hover, #cbced1) 60%, transparent));
2383
- }
2384
- .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child:active, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.active, .rcx-button-group--joined.rcx-button-group--ghost-start > .rcx-button:first-child.is-active {
2385
- border-color: transparent;
2386
- background-color: var(--rcx-button-ghost-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-press, #9ea2a8) 60%, transparent));
2387
- }
2388
- .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child {
2389
- color: var(--rcx-color-button-font-on-secondary, #1f2329);
2390
- border-color: transparent;
2391
- background-color: transparent;
2392
- }
2393
- .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child:focus-visible, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.focus.focus-visible {
2394
- border-color: transparent;
2395
- background-color: var(--rcx-button-ghost-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-focus, #e4e7ea) 60%, transparent));
2396
- }
2397
- .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child:hover, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.hover, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.is-hovered {
2398
- border-color: transparent;
2399
- background-color: var(--rcx-button-ghost-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-hover, #cbced1) 60%, transparent));
2400
- }
2401
- .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child:active, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.active, .rcx-button-group--joined.rcx-button-group--ghost-end > .rcx-button:last-child.is-active {
2402
- border-color: transparent;
2403
- background-color: var(--rcx-button-ghost-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-press, #9ea2a8) 60%, transparent));
2404
- }
2405
2345
 
2406
2346
  .rcx-callout {
2407
2347
  display: flex;
@@ -2426,10 +2366,10 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
2426
2366
  color: var(--rcx-callout-success-color, var(--rcx-color-status-font-on-success, #148660));
2427
2367
  }
2428
2368
  .rcx-callout--warning {
2429
- border-color: var(--rcx-callout-warning-color, var(--rcx-color-status-font-on-warning, #ac892f));
2369
+ border-color: var(--rcx-callout-warning-color, var(--rcx-color-status-font-on-warning, #895f00));
2430
2370
  }
2431
2371
  .rcx-callout--warning .rcx-callout__icon {
2432
- color: var(--rcx-callout-warning-color, var(--rcx-color-status-font-on-warning, #ac892f));
2372
+ color: var(--rcx-callout-warning-color, var(--rcx-color-status-font-on-warning, #895f00));
2433
2373
  }
2434
2374
  .rcx-callout--danger {
2435
2375
  border-color: var(--rcx-callout-danger-color, var(--rcx-color-status-font-on-danger, #9b1325));
@@ -2987,7 +2927,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
2987
2927
  color: var(--rcx-color-status-font-on-success, #148660);
2988
2928
  }
2989
2929
  .rcx-framed-icon--warning {
2990
- color: var(--rcx-color-status-font-on-warning, #ac892f);
2930
+ color: var(--rcx-color-status-font-on-warning, #895f00);
2991
2931
  }
2992
2932
  .rcx-framed-icon--danger {
2993
2933
  color: var(--rcx-color-status-font-on-danger, #9b1325);
@@ -3838,6 +3778,350 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
3838
3778
  text-rendering: auto;
3839
3779
  }
3840
3780
 
3781
+ .rcx-item-group {
3782
+ display: flex;
3783
+ flex-direction: column;
3784
+ margin: 0;
3785
+ padding: 0;
3786
+ list-style: none;
3787
+ container: rcx-item-group/inline-size;
3788
+ }
3789
+ .rcx-item-group + .rcx-item-group {
3790
+ margin-block-start: 0.5rem;
3791
+ }
3792
+
3793
+ .rcx-item {
3794
+ --rcx-item-gap: 0.25rem;
3795
+ --rcx-item-inset-inline: 0;
3796
+ position: relative;
3797
+ display: flex;
3798
+ align-items: center;
3799
+ box-sizing: border-box;
3800
+ min-width: 0;
3801
+ margin: 0;
3802
+ padding-block: 0.25rem;
3803
+ padding-inline: 0.25rem;
3804
+ list-style: none;
3805
+ text-align: start;
3806
+ text-decoration: none;
3807
+ color: var(--rcx-item-color-font-default, var(--rcx-color-font-default, #2f343d));
3808
+ border-radius: var(--rcx-border-radius-small, 0.125rem);
3809
+ font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", Arial, sans-serif);
3810
+ gap: var(--rcx-item-gap);
3811
+ letter-spacing: 0rem;
3812
+ font-size: 0.875rem;
3813
+ font-weight: 400;
3814
+ line-height: 1.25rem;
3815
+ }
3816
+ .rcx-item > :first-child {
3817
+ margin-inline-start: var(--rcx-item-inset-inline);
3818
+ }
3819
+ .rcx-item > :last-child {
3820
+ margin-inline-end: var(--rcx-item-inset-inline);
3821
+ }
3822
+ .rcx-item--inset-sm {
3823
+ --rcx-item-inset-inline: 0.25rem;
3824
+ }
3825
+ .rcx-item--inset-md {
3826
+ --rcx-item-inset-inline: 0.5rem;
3827
+ }
3828
+ .rcx-item--inset-lg {
3829
+ --rcx-item-inset-inline: 1.25rem;
3830
+ }
3831
+ .rcx-item:has(> .rcx-item__content > :nth-child(2)) {
3832
+ --rcx-item-gap: 0.5rem;
3833
+ }
3834
+ .rcx-item:where(.rcx-item--clickable,
3835
+ a,
3836
+ button,
3837
+ [role=option],
3838
+ [role^=menuitem],
3839
+ :has(.rcx-item__link)) {
3840
+ cursor: pointer;
3841
+ }
3842
+ .rcx-item:where(.rcx-item--clickable,
3843
+ a,
3844
+ button,
3845
+ [role=option],
3846
+ [role^=menuitem],
3847
+ :has(.rcx-item__link)):hover {
3848
+ background-color: var(--rcx-item-color-surface-hover, var(--rcx-color-surface-hover, #f2f3f5));
3849
+ }
3850
+ .rcx-item:focus-visible, .rcx-item:has(.rcx-item__link:focus-visible) {
3851
+ outline: 0;
3852
+ box-shadow: inset 0 0 0 2px var(--rcx-item-color-stroke-focus, var(--rcx-color-stroke-highlight, #156ff5));
3853
+ }
3854
+ .rcx-item.rcx-item--focused {
3855
+ background-color: var(--rcx-item-color-surface-hover, var(--rcx-color-surface-hover, #f2f3f5));
3856
+ }
3857
+ .rcx-item.rcx-item--selected {
3858
+ background-color: var(--rcx-item-color-surface-selected, var(--rcx-color-surface-selected, #d7dbe0));
3859
+ }
3860
+ .rcx-item.rcx-item--disabled {
3861
+ cursor: not-allowed;
3862
+ color: var(--rcx-item-color-font-disabled, var(--rcx-color-font-disabled, #cbced1));
3863
+ background-color: transparent;
3864
+ }
3865
+ .rcx-item--danger {
3866
+ color: var(--rcx-item-color-font-danger, var(--rcx-color-status-font-on-danger, #9b1325));
3867
+ }
3868
+ .rcx-item--highlighted .rcx-item__title, .rcx-item--highlighted .rcx-item__icon, .rcx-item--highlighted .rcx-item__description, .rcx-item--highlighted .rcx-item__meta {
3869
+ color: var(--rcx-item-color-font-highlighted, var(--rcx-color-font-titles-labels, #1f2329));
3870
+ font-weight: 500;
3871
+ }
3872
+ .rcx-item:hover .rcx-item__actions--reveal-hover, .rcx-item:focus-within .rcx-item__actions--reveal-hover, .rcx-item:has(.rcx-item__actions [aria-expanded=true]) .rcx-item__actions--reveal-hover {
3873
+ opacity: 1;
3874
+ grid-template-columns: 1fr;
3875
+ }
3876
+ .rcx-item:focus-within .rcx-item__actions-inner {
3877
+ overflow: visible;
3878
+ }
3879
+ .rcx-item__media {
3880
+ display: flex;
3881
+ justify-content: center;
3882
+ align-items: center;
3883
+ flex: none;
3884
+ }
3885
+ .rcx-item__media--icon {
3886
+ width: 1.25rem;
3887
+ height: 1.25rem;
3888
+ }
3889
+ .rcx-item__icon {
3890
+ display: flex;
3891
+ justify-content: center;
3892
+ align-items: center;
3893
+ flex: none;
3894
+ width: 1.25rem;
3895
+ height: 1.25rem;
3896
+ }
3897
+ .rcx-item__content {
3898
+ display: flex;
3899
+ flex-direction: column;
3900
+ flex: 1 1 auto;
3901
+ min-width: 0;
3902
+ }
3903
+ .rcx-item__row {
3904
+ display: flex;
3905
+ align-items: center;
3906
+ min-width: 0;
3907
+ gap: 0.25rem;
3908
+ }
3909
+ .rcx-item__title {
3910
+ overflow: hidden;
3911
+ flex: 1 1 auto;
3912
+ min-width: 0;
3913
+ white-space: nowrap;
3914
+ text-overflow: ellipsis;
3915
+ }
3916
+ .rcx-item__description {
3917
+ overflow: hidden;
3918
+ flex: 1 1 auto;
3919
+ min-width: 0;
3920
+ white-space: nowrap;
3921
+ text-overflow: ellipsis;
3922
+ color: var(--rcx-item-color-font-secondary, var(--rcx-color-font-secondary-info, #6c737a));
3923
+ letter-spacing: 0rem;
3924
+ font-size: 0.75rem;
3925
+ font-weight: 400;
3926
+ line-height: 1rem;
3927
+ }
3928
+ .rcx-item__description--inline {
3929
+ display: inline;
3930
+ margin-inline-start: 0.25rem;
3931
+ }
3932
+ .rcx-item__meta {
3933
+ flex: none;
3934
+ white-space: nowrap;
3935
+ color: var(--rcx-item-color-font-secondary, var(--rcx-color-font-secondary-info, #6c737a));
3936
+ letter-spacing: 0rem;
3937
+ font-size: 0.75rem;
3938
+ font-weight: 400;
3939
+ line-height: 1rem;
3940
+ }
3941
+ .rcx-item__link {
3942
+ display: block;
3943
+ overflow: hidden;
3944
+ width: 100%;
3945
+ margin: 0;
3946
+ padding: 0;
3947
+ cursor: pointer;
3948
+ text-align: start;
3949
+ white-space: nowrap;
3950
+ text-decoration: none;
3951
+ text-overflow: ellipsis;
3952
+ color: inherit;
3953
+ border: 0;
3954
+ outline: 0;
3955
+ background: none;
3956
+ font: inherit;
3957
+ }
3958
+ .rcx-item__link::after {
3959
+ position: absolute;
3960
+ inset: 0;
3961
+ content: "";
3962
+ border-radius: inherit;
3963
+ }
3964
+ .rcx-item__actions {
3965
+ position: relative;
3966
+ z-index: 1;
3967
+ display: flex;
3968
+ align-items: center;
3969
+ flex: none;
3970
+ gap: 0.125rem;
3971
+ }
3972
+ .rcx-item__actions--reveal-hover {
3973
+ display: grid;
3974
+ transition: grid-template-columns 0.18s ease, opacity 0.18s ease;
3975
+ opacity: 0;
3976
+ grid-template-columns: 0fr;
3977
+ }
3978
+ @media (prefers-reduced-motion: reduce) {
3979
+ .rcx-item__actions--reveal-hover {
3980
+ transition: none;
3981
+ }
3982
+ }
3983
+ .rcx-item__actions-inner {
3984
+ display: flex;
3985
+ overflow: hidden;
3986
+ align-items: center;
3987
+ min-width: 0;
3988
+ gap: 0.125rem;
3989
+ }
3990
+
3991
+ .rcx-item-group-header {
3992
+ --rcx-item-inset-inline: 0;
3993
+ position: relative;
3994
+ display: flex;
3995
+ align-items: center;
3996
+ box-sizing: border-box;
3997
+ min-width: 0;
3998
+ min-height: 1.75rem;
3999
+ margin: 0;
4000
+ padding: 0.25rem;
4001
+ list-style: none;
4002
+ color: var(--rcx-item-color-font-secondary, var(--rcx-color-font-secondary-info, #6c737a));
4003
+ border-radius: var(--rcx-border-radius-small, 0.125rem);
4004
+ font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", Arial, sans-serif);
4005
+ gap: 0.25rem;
4006
+ letter-spacing: 0rem;
4007
+ font-size: 0.75rem;
4008
+ font-weight: 700;
4009
+ line-height: 1rem;
4010
+ }
4011
+ .rcx-item-group-header > :first-child {
4012
+ margin-inline-start: var(--rcx-item-inset-inline);
4013
+ }
4014
+ .rcx-item-group-header > :last-child {
4015
+ margin-inline-end: var(--rcx-item-inset-inline);
4016
+ }
4017
+ .rcx-item-group-header--inset-sm {
4018
+ --rcx-item-inset-inline: 0.25rem;
4019
+ }
4020
+ .rcx-item-group-header--inset-md {
4021
+ --rcx-item-inset-inline: 0.5rem;
4022
+ }
4023
+ .rcx-item-group-header--inset-lg {
4024
+ --rcx-item-inset-inline: 1.25rem;
4025
+ }
4026
+ .rcx-item-group-header--sticky {
4027
+ position: sticky;
4028
+ z-index: 2;
4029
+ top: 0;
4030
+ background-color: var(--rcx-item-group-header-color-surface, var(--rcx-color-surface-light, #ffffff));
4031
+ }
4032
+ .rcx-item-group-header:has(.rcx-item-group-title:is(button)):hover {
4033
+ background-color: var(--rcx-item-color-surface-hover, var(--rcx-color-surface-hover, #f2f3f5));
4034
+ }
4035
+ .rcx-item-group-header:has(.rcx-item-group-title:is(button):focus-visible) {
4036
+ outline: 0;
4037
+ box-shadow: inset 0 0 0 2px var(--rcx-item-color-stroke-focus, var(--rcx-color-stroke-highlight, #156ff5));
4038
+ }
4039
+ .rcx-item-group-header:hover .rcx-item__actions--reveal-hover, .rcx-item-group-header:focus-within .rcx-item__actions--reveal-hover, .rcx-item-group-header:has(.rcx-item__actions [aria-expanded=true]) .rcx-item__actions--reveal-hover {
4040
+ opacity: 1;
4041
+ grid-template-columns: 1fr;
4042
+ }
4043
+ .rcx-item-group-header .rcx-item__meta {
4044
+ font-weight: 400;
4045
+ }
4046
+
4047
+ .rcx-item-group-title {
4048
+ overflow: hidden;
4049
+ flex: 1 1 auto;
4050
+ min-width: 0;
4051
+ margin: 0;
4052
+ white-space: nowrap;
4053
+ text-overflow: ellipsis;
4054
+ color: inherit;
4055
+ font: inherit;
4056
+ }
4057
+ .rcx-item-group-title:is(button) {
4058
+ display: flex;
4059
+ align-items: center;
4060
+ padding: 0;
4061
+ cursor: pointer;
4062
+ text-align: start;
4063
+ border: 0;
4064
+ outline: 0;
4065
+ background: none;
4066
+ gap: 0.25rem;
4067
+ }
4068
+ .rcx-item-group-title:is(button)::after {
4069
+ position: absolute;
4070
+ inset: 0;
4071
+ content: "";
4072
+ border-radius: inherit;
4073
+ }
4074
+
4075
+ .rcx-item-divider {
4076
+ --rcx-item-inset-inline: 0;
4077
+ display: block;
4078
+ margin: 0;
4079
+ padding-block: 0.25rem;
4080
+ padding-inline: 0;
4081
+ list-style: none;
4082
+ border: 0;
4083
+ }
4084
+ .rcx-item-divider--inset-sm {
4085
+ --rcx-item-inset-inline: 0.25rem;
4086
+ }
4087
+ .rcx-item-divider--inset-md {
4088
+ --rcx-item-inset-inline: 0.5rem;
4089
+ }
4090
+ .rcx-item-divider--inset-lg {
4091
+ --rcx-item-inset-inline: 1.25rem;
4092
+ }
4093
+ .rcx-item-divider::before {
4094
+ display: block;
4095
+ content: "";
4096
+ border-top: 1px solid var(--rcx-item-color-stroke-divider, var(--rcx-color-stroke-extra-light, #ebecef));
4097
+ }
4098
+ .rcx-item-divider--inset-sm, .rcx-item-divider--inset-md, .rcx-item-divider--inset-lg {
4099
+ margin-inline: calc(0.25rem + var(--rcx-item-inset-inline));
4100
+ }
4101
+
4102
+ @container rcx-item-group (width < 320px) {
4103
+ .rcx-item--inset-lg,
4104
+ .rcx-item-group-header--inset-lg,
4105
+ .rcx-item-divider--inset-lg {
4106
+ --rcx-item-inset-inline: 0.75rem;
4107
+ }
4108
+ .rcx-item__description--inline {
4109
+ display: block;
4110
+ margin-inline-start: 0;
4111
+ }
4112
+ }
4113
+ @media (pointer: coarse) {
4114
+ .rcx-item {
4115
+ padding-block: 0.5rem;
4116
+ }
4117
+ }
4118
+ @media (hover: none) {
4119
+ .rcx-item .rcx-item__actions--reveal-hover,
4120
+ .rcx-item-group-header .rcx-item__actions--reveal-hover {
4121
+ opacity: 1;
4122
+ grid-template-columns: 1fr;
4123
+ }
4124
+ }
3841
4125
  .rcx-label {
3842
4126
  letter-spacing: 0rem;
3843
4127
  font-size: 0.875rem;
@@ -4191,7 +4475,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
4191
4475
  color: var(--rcx-message-status-variant-color-danger, var(--rcx-color-status-font-on-danger, #9b1325));
4192
4476
  }
4193
4477
  .rcx-message-status-indicator__item--warning {
4194
- color: var(--rcx-message-status-variant-color-warning, var(--rcx-color-status-font-on-warning, #ac892f));
4478
+ color: var(--rcx-message-status-variant-color-warning, var(--rcx-color-status-font-on-warning, #895f00));
4195
4479
  }
4196
4480
  .rcx-message-status-indicator__item--primary {
4197
4481
  color: var(--rcx-message-status-variant-color-primary, var(--rcx-color-status-font-on-primary, ));
@@ -4707,7 +4991,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
4707
4991
  color: var(--rcx-message-highlight-colors-link-color, var(--rcx-color-status-font-on-info, #095ad2));
4708
4992
  }
4709
4993
  .rcx-message__highlight--other {
4710
- color: var(--rcx-message-highlight-colors-other-color, var(--rcx-color-status-font-on-warning, #ac892f));
4994
+ color: var(--rcx-message-highlight-colors-other-color, var(--rcx-color-status-font-on-warning, #895f00));
4711
4995
  }
4712
4996
  .rcx-message__highlight:focus-visible, .rcx-message__highlight.focus.focus-visible {
4713
4997
  border-radius: var(--rcx-border-radius-medium, 0.25rem);
@@ -4955,7 +5239,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
4955
5239
  color: var(--rcx-option-color-variant-danger, var(--rcx-color-status-font-on-danger, #9b1325));
4956
5240
  }
4957
5241
  .rcx-option--warning {
4958
- color: var(--rcx-option-color-variant-warning, var(--rcx-color-status-font-on-warning, #ac892f));
5242
+ color: var(--rcx-option-color-variant-warning, var(--rcx-color-status-font-on-warning, #895f00));
4959
5243
  }
4960
5244
  .rcx-option--primary {
4961
5245
  color: var(--rcx-option-color-variant-primary, var(--rcx-color-status-font-on-primary, ));
@@ -5624,7 +5908,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
5624
5908
  background-color: var(--rcx-sidebar-banner-background-success, var(--rcx-color-status-background-success, #c0f6e4));
5625
5909
  }
5626
5910
  .rcx-sidebar-banner--warning {
5627
- color: var(--rcx-sidebar-banner-background-warning, var(--rcx-color-status-font-on-warning, #ac892f));
5911
+ color: var(--rcx-sidebar-banner-background-warning, var(--rcx-color-status-font-on-warning, #895f00));
5628
5912
  background-color: var(--rcx-sidebar-banner-background-warning, var(--rcx-color-status-background-warning, #ffecad));
5629
5913
  }
5630
5914
  .rcx-sidebar-banner--danger {
@@ -5716,6 +6000,126 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
5716
6000
  background-position: 100vw 0;
5717
6001
  }
5718
6002
  }
6003
+ .rcx-split-button {
6004
+ display: inline-flex;
6005
+ flex-flow: row nowrap;
6006
+ align-items: stretch;
6007
+ border-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
6008
+ background-color: var(--rcx-split-button-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-default, #e4e7ea) 70%, transparent));
6009
+ }
6010
+ .rcx-split-button > .rcx-button {
6011
+ border-radius: 0;
6012
+ }
6013
+ .rcx-split-button > .rcx-button:first-child {
6014
+ border-end-start-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
6015
+ border-start-start-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
6016
+ }
6017
+ .rcx-split-button > .rcx-button:last-child {
6018
+ border-end-end-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
6019
+ border-start-end-radius: var(--rcx-button-border-radius, var(--rcx-border-radius-medium, 0.25rem));
6020
+ }
6021
+ .rcx-split-button > .rcx-button:focus-visible, .rcx-split-button > .rcx-button.focus.focus-visible {
6022
+ position: relative;
6023
+ z-index: 1;
6024
+ }
6025
+ .rcx-split-button > .rcx-button.rcx-split-button__trigger {
6026
+ color: var(--rcx-color-button-font-on-secondary, #1f2329);
6027
+ border-color: transparent;
6028
+ background-color: transparent;
6029
+ }
6030
+ .rcx-split-button > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
6031
+ border-color: transparent;
6032
+ background-color: var(--rcx-button-ghost-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-focus, #e4e7ea) 70%, transparent));
6033
+ }
6034
+ .rcx-split-button > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button > .rcx-button.rcx-split-button__trigger.is-hovered {
6035
+ border-color: transparent;
6036
+ background-color: var(--rcx-button-ghost-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-hover, #cbced1) 70%, transparent));
6037
+ }
6038
+ .rcx-split-button > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button > .rcx-button.rcx-split-button__trigger.is-active {
6039
+ border-color: transparent;
6040
+ background-color: var(--rcx-button-ghost-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-secondary-press, #9ea2a8) 70%, transparent));
6041
+ }
6042
+ .rcx-split-button--danger {
6043
+ background-color: var(--rcx-split-button-danger-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-default, #ec0d2a) 70%, transparent));
6044
+ }
6045
+ .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger {
6046
+ color: var(--rcx-split-button-danger-color, var(--rcx-color-button-font-on-danger, #ffffff));
6047
+ border-color: transparent;
6048
+ background-color: transparent;
6049
+ }
6050
+ .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
6051
+ border-color: transparent;
6052
+ background-color: var(--rcx-button-ghost-danger-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-focus, #ec0d2a) 70%, transparent));
6053
+ }
6054
+ .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.is-hovered {
6055
+ border-color: transparent;
6056
+ background-color: var(--rcx-button-ghost-danger-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-hover, #d40c26) 70%, transparent));
6057
+ }
6058
+ .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--danger > .rcx-button.rcx-split-button__trigger.is-active {
6059
+ border-color: transparent;
6060
+ background-color: var(--rcx-button-ghost-danger-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-danger-press, #bb0b21) 70%, transparent));
6061
+ }
6062
+ .rcx-split-button--warning {
6063
+ background-color: var(--rcx-split-button-warning-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-default, #ffd95a) 70%, transparent));
6064
+ }
6065
+ .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger {
6066
+ color: var(--rcx-split-button-warning-color, var(--rcx-color-button-font-on-warning, #1f2329));
6067
+ border-color: transparent;
6068
+ background-color: transparent;
6069
+ }
6070
+ .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
6071
+ border-color: transparent;
6072
+ background-color: var(--rcx-button-ghost-warning-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-focus, #ffd95a) 70%, transparent));
6073
+ }
6074
+ .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.is-hovered {
6075
+ border-color: transparent;
6076
+ background-color: var(--rcx-button-ghost-warning-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-hover, #ffd031) 70%, transparent));
6077
+ }
6078
+ .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--warning > .rcx-button.rcx-split-button__trigger.is-active {
6079
+ border-color: transparent;
6080
+ background-color: var(--rcx-button-ghost-warning-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-warning-press, #f3be08) 70%, transparent));
6081
+ }
6082
+ .rcx-split-button--success {
6083
+ background-color: var(--rcx-split-button-success-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-default, #148660) 70%, transparent));
6084
+ }
6085
+ .rcx-split-button--success > .rcx-button.rcx-split-button__trigger {
6086
+ color: var(--rcx-split-button-success-color, var(--rcx-color-button-font-on-success, #ffffff));
6087
+ border-color: transparent;
6088
+ background-color: transparent;
6089
+ }
6090
+ .rcx-split-button--success > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
6091
+ border-color: transparent;
6092
+ background-color: var(--rcx-button-ghost-success-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-focus, #148660) 70%, transparent));
6093
+ }
6094
+ .rcx-split-button--success > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.is-hovered {
6095
+ border-color: transparent;
6096
+ background-color: var(--rcx-button-ghost-success-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-hover, #106d4f) 70%, transparent));
6097
+ }
6098
+ .rcx-split-button--success > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--success > .rcx-button.rcx-split-button__trigger.is-active {
6099
+ border-color: transparent;
6100
+ background-color: var(--rcx-button-ghost-success-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-success-press, #0d5940) 70%, transparent));
6101
+ }
6102
+ .rcx-split-button--primary {
6103
+ background-color: var(--rcx-split-button-primary-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-default, #156ff5) 70%, transparent));
6104
+ }
6105
+ .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger {
6106
+ color: var(--rcx-split-button-primary-color, var(--rcx-color-button-font-on-primary, #ffffff));
6107
+ border-color: transparent;
6108
+ background-color: transparent;
6109
+ }
6110
+ .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger:focus-visible, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.focus.focus-visible {
6111
+ border-color: transparent;
6112
+ background-color: var(--rcx-button-ghost-primary-focus-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-focus, #156ff5) 70%, transparent));
6113
+ }
6114
+ .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger:hover, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.hover, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.is-hovered {
6115
+ border-color: transparent;
6116
+ background-color: var(--rcx-button-ghost-primary-hover-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-hover, #095ad2) 70%, transparent));
6117
+ }
6118
+ .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger:active, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.active, .rcx-split-button--primary > .rcx-button.rcx-split-button__trigger.is-active {
6119
+ border-color: transparent;
6120
+ background-color: var(--rcx-button-ghost-primary-active-background-color, color-mix(in srgb, var(--rcx-color-button-background-primary-press, #10529e) 70%, transparent));
6121
+ }
6122
+
5719
6123
  .rcx-states {
5720
6124
  display: flex;
5721
6125
  flex-direction: column;
@@ -5738,7 +6142,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
5738
6142
  color: var(--rcx-states-icons-color-danger, var(--rcx-color-status-font-on-danger, #9b1325));
5739
6143
  }
5740
6144
  .rcx-states__icon--warning {
5741
- color: var(--rcx-states-icons-color-warning, var(--rcx-color-status-font-on-warning, #ac892f));
6145
+ color: var(--rcx-states-icons-color-warning, var(--rcx-color-status-font-on-warning, #895f00));
5742
6146
  }
5743
6147
  .rcx-states__icon--primary {
5744
6148
  color: var(--rcx-states-icons-color-primary, var(--rcx-color-status-font-on-info, #095ad2));
@@ -6206,20 +6610,20 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
6206
6610
  background-color: var(--rcx-tag-colors-secondary-danger-hover-background-color, var(--rcx-color-button-background-secondary-danger-hover, #cbced1));
6207
6611
  }
6208
6612
  .rcx-tag--secondary-warning {
6209
- color: var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #ac892f));
6613
+ color: var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #895f00));
6210
6614
  background-color: var(--rcx-tag-colors-secondary-warning-background-color, var(--rcx-color-button-background-secondary-default, #e4e7ea));
6211
6615
  }
6212
6616
  .rcx-tag--secondary-warning.rcx-tag--clickable {
6213
- color: var(--rcx-link-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #ac892f)));
6617
+ color: var(--rcx-link-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #895f00)));
6214
6618
  }
6215
6619
  .rcx-tag--secondary-warning.rcx-tag--clickable:focus, .rcx-tag--secondary-warning.rcx-tag--clickable:focus-within, .rcx-tag--secondary-warning.rcx-tag--clickable.focus, .rcx-tag--secondary-warning.rcx-tag--clickable.is-focused {
6216
- color: var(--rcx-link-focus-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #ac892f)));
6620
+ color: var(--rcx-link-focus-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #895f00)));
6217
6621
  }
6218
6622
  .rcx-tag--secondary-warning.rcx-tag--clickable:where(:visited), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.is-visited) {
6219
- color: var(--rcx-link-visited-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #ac892f)));
6623
+ color: var(--rcx-link-visited-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #895f00)));
6220
6624
  }
6221
6625
  .rcx-tag--secondary-warning.rcx-tag--clickable:where(:active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.active), .rcx-tag--secondary-warning.rcx-tag--clickable:where(.is-active) {
6222
- color: var(--rcx-link-active-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #ac892f)));
6626
+ color: var(--rcx-link-active-color, var(--rcx-tag-colors-secondary-warning-color, var(--rcx-color-status-font-on-warning, #895f00)));
6223
6627
  }
6224
6628
  .rcx-tag--secondary-warning.rcx-tag--clickable:hover {
6225
6629
  background-color: var(--rcx-tag-colors-secondary-warning-hover-background-color, var(--rcx-color-button-background-secondary-hover, #cbced1));
@@ -6260,6 +6664,9 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
6260
6664
  font-weight: 700;
6261
6665
  line-height: 1.25rem;
6262
6666
  }
6667
+ .rcx-tag--pill {
6668
+ --rcx-tag-border-radius: var(--rcx-border-radius-full, 624.9375rem);
6669
+ }
6263
6670
 
6264
6671
  .rcx-throbber {
6265
6672
  display: flex;