@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/src/v3/menu.css

@@ -0,0 +1,947 @@
+/**
+ * Seeds Menu v3 component classes
+ * Pure CSS-class implementation of the v3 (Base UI) menu surface: Select,
+ * Combobox, Searchable Select, and Action Menu pieces. These classes replace
+ * the styled-components definitions that previously lived in SelectStyles.tsx,
+ * ComboboxStyles.tsx, SelectItem.tsx, SelectIcons.tsx, ActionMenuStyles.tsx,
+ * and MenuButtonStyles.tsx.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
+ * CSS variable definitions and dark mode support. Consumers of
+ * @sproutsocial/seeds-react-menu/base must also import the CSS via
+ * @sproutsocial/seeds-react-menu/base/css.
+ *
+ * All rules live in the `components` cascade layer so that unlayered Tailwind
+ * utilities always win over these component styles, letting consumers override
+ * layout via utility classes.
+ *
+ * State is driven by Base UI data-* attributes ([data-highlighted],
+ * [data-selected], [data-disabled], [data-popup-open], [data-open],
+ * [data-closed], [data-empty]); those selectors are carried over verbatim from
+ * the styled-components source so behavior is unchanged.
+ */
+
+@layer components {
+  /* ======================================================================== */
+  /* Shared field / label (SelectStyles: Field, SelectLabel, ComboboxLabel)   */
+  /* ======================================================================== */
+  .seeds-menu-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-200);
+    width: 100%;
+  }
+
+  /* $fullWidth === false */
+  .seeds-menu-field--inline {
+    display: inline-flex;
+    width: auto;
+  }
+
+  .seeds-menu-label {
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+  }
+
+  /* ======================================================================== */
+  /* Focus ring (focusRing mixin)                                             */
+  /* ======================================================================== */
+  .seeds-menu-focus-ring {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+  .seeds-menu-focus-ring::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* ======================================================================== */
+  /* Select trigger / value / icon (SelectStyles)                             */
+  /* ======================================================================== */
+  .seeds-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-300);
+    padding: var(--space-300);
+    min-width: 160px;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    font-size: var(--font-size-200);
+    color: var(--color-text-body);
+    cursor: default;
+    outline: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-select-trigger:focus-visible,
+  .seeds-select-trigger[data-popup-open] {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  .seeds-select-trigger[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+
+  .seeds-select-trigger[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* $isInvalid */
+  .seeds-select-trigger--invalid {
+    border-color: var(--color-form-border-error);
+  }
+  .seeds-select-trigger--invalid .seeds-menu-chevron {
+    color: var(--color-icon-error);
+  }
+
+  .seeds-select-value {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  /* SingleSelect local StyledValue */
+  .seeds-select-value-text {
+    flex: 1;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .seeds-select-value-text[data-placeholder] {
+    color: var(--color-text-subtext);
+  }
+
+  /* MultiSelect local SelectionText */
+  .seeds-select-selection-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* MultiSelect local Placeholder */
+  .seeds-select-placeholder {
+    color: var(--color-text-subtext);
+    font-size: var(--font-size-200);
+    line-height: 16px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 2px 8px 0 0;
+  }
+
+  .seeds-select-icon {
+    display: flex;
+    align-items: center;
+    color: var(--color-icon-base);
+    flex-shrink: 0;
+  }
+
+  /* ======================================================================== */
+  /* Select group / label / separator (SelectStyles)                          */
+  /* ======================================================================== */
+  .seeds-select-group {
+    display: block;
+  }
+
+  .seeds-select-group-label {
+    padding: var(--space-300) var(--space-300) var(--space-200);
+    font-size: var(--font-size-100);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-select-separator {
+    height: 1px;
+    margin: var(--space-200) var(--space-300);
+    background: var(--color-container-border-base);
+  }
+
+  /* ======================================================================== */
+  /* Select positioner / popup (SelectStyles)                                 */
+  /* ======================================================================== */
+  .seeds-select-positioner {
+    width: var(--anchor-width);
+    z-index: 7;
+  }
+
+  .seeds-select-popup {
+    font-family: var(--font-family);
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    box-shadow: var(--shadow-low);
+    outline: none;
+    max-height: min(var(--available-height, 400px), 400px);
+    overflow-y: auto;
+    padding: var(--space-200);
+  }
+
+  .seeds-select-popup[data-open] {
+    animation: seeds-select-popup-in 120ms ease-out;
+  }
+  .seeds-select-popup[data-closed] {
+    animation: seeds-select-popup-out 100ms ease-in;
+  }
+
+  @keyframes seeds-select-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes seeds-select-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  /* ======================================================================== */
+  /* Select item (SelectItem.tsx)                                             */
+  /* NOTE: font-size 14px and padding 6px are legacy literals that do NOT     */
+  /* match a token (--font-size-200 is 13px); preserved to avoid a visual     */
+  /* regression.                                                              */
+  /* ======================================================================== */
+  .seeds-select-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    padding: 6px var(--space-300);
+    border-radius: var(--radius-500);
+    font-size: 14px;
+    color: var(--color-text-body);
+    cursor: default;
+    outline: none;
+  }
+
+  .seeds-select-item[data-highlighted] {
+    background: var(--color-listItem-bg-hover);
+  }
+  .seeds-select-item[data-selected] {
+    font-weight: var(--font-weight-semibold);
+  }
+  .seeds-select-item[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .seeds-select-item-indicator {
+    display: flex;
+    align-items: center;
+    width: var(--space-400);
+    color: var(--color-text-body);
+    visibility: hidden;
+  }
+  .seeds-select-item-indicator[data-selected] {
+    visibility: visible;
+  }
+
+  /* ======================================================================== */
+  /* Chevron (SelectIcons.tsx StyledChevron)                                  */
+  /* $isOpen is keyed off the trigger's [data-popup-open] selector above.     */
+  /* ======================================================================== */
+  .seeds-menu-chevron {
+    display: flex;
+    align-items: center;
+    transition: transform 0.15s;
+  }
+
+  /* $isOpen (combobox chevrons that don't sit under a [data-popup-open] trigger) */
+  .seeds-menu-chevron--open {
+    transform: rotate(-180deg);
+  }
+
+  /* ======================================================================== */
+  /* Combobox input group / input (ComboboxStyles)                            */
+  /* ======================================================================== */
+  .seeds-combobox-input-group {
+    display: flex;
+    align-items: center;
+    min-width: 160px;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-combobox-input-group:focus-within {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  .seeds-combobox-input-group[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-combobox-input-group--invalid {
+    border-color: var(--color-form-border-error);
+  }
+  .seeds-combobox-input-group--invalid .seeds-menu-chevron {
+    color: var(--color-icon-error);
+  }
+
+  .seeds-combobox-input {
+    flex: 1;
+    min-width: 30px;
+    padding: var(--space-300);
+    border: none !important;
+    background: transparent;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+    outline: none;
+  }
+  .seeds-combobox-input::placeholder {
+    color: var(--color-text-subtext);
+  }
+  .seeds-combobox-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .seeds-combobox-token-input {
+    flex: 1;
+    min-width: 60px;
+    padding: var(--space-200) var(--space-300) var(--space-200) var(--space-350);
+    border: none !important;
+    background: transparent;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+    outline: none;
+  }
+  .seeds-combobox-token-input::placeholder {
+    color: var(--color-text-subtext);
+  }
+  .seeds-combobox-token-input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ======================================================================== */
+  /* Combobox action buttons / clear / trigger (ComboboxStyles)               */
+  /* ======================================================================== */
+  .seeds-combobox-action-buttons {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    gap: var(--space-100);
+  }
+
+  /* radii[300] had no token (undefined at runtime); mapped to --radius-400 */
+  .seeds-combobox-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: transparent;
+    color: var(--color-icon-base);
+    cursor: pointer;
+    border-radius: var(--radius-400);
+    padding: 0;
+  }
+  .seeds-combobox-clear:hover {
+    color: var(--color-text-body);
+  }
+  .seeds-combobox-clear:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+  .seeds-combobox-clear[data-empty] {
+    display: none;
+  }
+
+  .seeds-combobox-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: transparent;
+    color: var(--color-icon-base);
+    cursor: default;
+    padding: 0;
+  }
+  .seeds-combobox-trigger:hover {
+    color: var(--color-text-body);
+  }
+
+  /* ======================================================================== */
+  /* Combobox positioner / popup / list / status / empty (ComboboxStyles)     */
+  /* ======================================================================== */
+  .seeds-combobox-positioner {
+    width: var(--anchor-width);
+    z-index: 7;
+  }
+
+  .seeds-combobox-popup {
+    font-family: var(--font-family);
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    box-shadow: var(--shadow-medium);
+    outline: none;
+    width: 100%;
+    max-height: min(var(--available-height, 400px), 400px);
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  .seeds-combobox-popup[data-open] {
+    animation: seeds-combobox-popup-in 120ms ease-out;
+  }
+  .seeds-combobox-popup[data-closed] {
+    animation: seeds-combobox-popup-out 100ms ease-in;
+  }
+
+  @keyframes seeds-combobox-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes seeds-combobox-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  .seeds-combobox-list {
+    padding: var(--space-200);
+  }
+  .seeds-combobox-list:empty {
+    padding: 0;
+  }
+
+  .seeds-combobox-status,
+  .seeds-combobox-empty {
+    padding: var(--space-300) var(--space-350);
+    font-size: var(--font-size-200);
+    color: var(--color-text-subtext);
+  }
+  .seeds-combobox-status:empty,
+  .seeds-combobox-empty:empty {
+    padding: 0;
+  }
+
+  /* ======================================================================== */
+  /* Combobox item / indicator (ComboboxStyles)                               */
+  /* ======================================================================== */
+  .seeds-combobox-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    padding: var(--space-300) var(--space-300);
+    border-radius: var(--radius-500);
+    font-size: var(--font-size-200);
+    color: var(--color-text-body);
+    cursor: default;
+    outline: none;
+  }
+  .seeds-combobox-item[data-highlighted] {
+    background: var(--color-listItem-bg-hover);
+  }
+  .seeds-combobox-item[data-selected] {
+    font-weight: var(--font-weight-semibold);
+  }
+  .seeds-combobox-item[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .seeds-combobox-item-indicator {
+    display: flex;
+    align-items: center;
+    width: var(--space-400);
+    color: var(--color-text-body);
+    visibility: hidden;
+  }
+  .seeds-combobox-item-indicator[data-selected] {
+    visibility: visible;
+  }
+
+  /* ======================================================================== */
+  /* Combobox group / label / separator (ComboboxStyles)                      */
+  /* ======================================================================== */
+  .seeds-combobox-group {
+    display: block;
+  }
+
+  .seeds-combobox-group-label {
+    padding: var(--space-300) var(--space-300) var(--space-200);
+    font-size: var(--font-size-100);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-combobox-separator {
+    height: 1px;
+    margin: var(--space-200) var(--space-300);
+    background: var(--color-container-border-base);
+  }
+
+  /* ======================================================================== */
+  /* Combobox group-header item / select-all item (ComboboxStyles)            */
+  /* ======================================================================== */
+  .seeds-combobox-group-header-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    padding: var(--space-300) var(--space-300);
+    border-radius: var(--radius-500);
+    font-size: var(--font-size-100);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-subtext);
+    cursor: default;
+    outline: none;
+  }
+  .seeds-combobox-group-header-item[data-highlighted] {
+    background: var(--color-listItem-bg-hover);
+    color: var(--color-text-body);
+  }
+  .seeds-combobox-group-header-item[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .seeds-combobox-select-all-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    padding: var(--space-300) var(--space-300);
+    border-radius: var(--radius-500);
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    cursor: default;
+    outline: none;
+    border-bottom: 1px solid var(--color-container-border-base);
+    margin-bottom: var(--space-200);
+  }
+  .seeds-combobox-select-all-item[data-highlighted] {
+    background: var(--color-listItem-bg-hover);
+  }
+
+  /* ======================================================================== */
+  /* Multi-select tokens (ComboboxStyles: ComboboxToken, Token, TokenRemove)  */
+  /* ======================================================================== */
+  .seeds-combobox-tokens {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: var(--space-200);
+  }
+
+  .seeds-combobox-token-input-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    padding: var(--space-200) var(--space-300) var(--space-200) var(--space-200);
+    gap: var(--space-200);
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+  .seeds-combobox-token-input-group:focus-within {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+  .seeds-combobox-token-input-group[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .seeds-combobox-token-input-group--invalid {
+    border-color: var(--color-form-border-error);
+  }
+  .seeds-combobox-token-input-group--invalid .seeds-menu-chevron {
+    color: var(--color-icon-error);
+  }
+
+  .seeds-combobox-token {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-200);
+    padding: var(--space-200) var(--space-300);
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+    color: var(--color-text-body);
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-normal);
+    line-height: 1;
+    white-space: nowrap;
+    transition: all var(--duration-fast) var(--ease-ease_inout);
+  }
+  .seeds-combobox-token:hover {
+    box-shadow: var(--shadow-low);
+    border-color: var(--color-container-border-base);
+  }
+
+  .seeds-combobox-token-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+  }
+  .seeds-combobox-token-remove:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  /* ======================================================================== */
+  /* Searchable select (ComboboxStyles)                                       */
+  /* ======================================================================== */
+  .seeds-searchable-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-300);
+    padding: var(--space-200) var(--space-350);
+    min-width: 160px;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    font-size: var(--font-size-200);
+    color: var(--color-text-body);
+    cursor: default;
+    outline: none;
+    user-select: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+  .seeds-searchable-select-trigger:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+  .seeds-searchable-select-trigger[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+  .seeds-searchable-select-trigger[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .seeds-searchable-select-trigger--invalid {
+    border-color: var(--color-form-border-error);
+  }
+  .seeds-searchable-select-trigger--invalid .seeds-menu-chevron {
+    color: var(--color-icon-error);
+  }
+
+  .seeds-searchable-select-trigger-icon {
+    display: flex;
+    align-items: center;
+    color: var(--color-icon-base);
+    flex-shrink: 0;
+  }
+
+  .seeds-searchable-select-placeholder {
+    color: var(--color-text-subtext);
+    padding: var(--space-200) 0;
+  }
+
+  .seeds-searchable-select-search-container {
+    padding: var(--space-300);
+    border-bottom: 1px solid var(--color-container-border-base);
+    flex-shrink: 0;
+  }
+
+  .seeds-searchable-select-input {
+    width: 100%;
+    height: var(--space-500);
+    padding: 0 var(--space-300);
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+    font-size: var(--font-size-200);
+    color: var(--color-text-body);
+    outline: none;
+    box-sizing: border-box;
+  }
+  .seeds-searchable-select-input:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+  .seeds-searchable-select-input::placeholder {
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-searchable-select-list {
+    overflow-y: auto;
+    padding: var(--space-200);
+    flex: 1;
+    min-height: 0;
+  }
+  .seeds-searchable-select-list:empty {
+    padding: 0;
+  }
+
+  .seeds-searchable-select-token-trigger {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    min-width: 160px;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    padding: var(--space-200) var(--space-300);
+    gap: var(--space-200);
+    cursor: default;
+    text-align: left;
+    outline: none;
+    user-select: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+  .seeds-searchable-select-token-trigger:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+  .seeds-searchable-select-token-trigger[data-popup-open] {
+    border-color: var(--color-blue-600);
+  }
+  .seeds-searchable-select-token-trigger[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+  .seeds-searchable-select-token-trigger[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .seeds-searchable-select-token-trigger--invalid {
+    border-color: var(--color-form-border-error);
+  }
+  .seeds-searchable-select-token-trigger--invalid .seeds-menu-chevron {
+    color: var(--color-icon-error);
+  }
+
+  /* ======================================================================== */
+  /* Action menu (ActionMenuStyles)                                           */
+  /* ======================================================================== */
+  .seeds-action-menu-positioner {
+    min-width: var(--anchor-width);
+    z-index: 7;
+  }
+
+  .seeds-action-menu-popup {
+    font-family: var(--font-family);
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    box-shadow: var(--shadow-low);
+    outline: none;
+    max-height: min(var(--available-height, 400px), 400px);
+    overflow-y: auto;
+    padding: var(--space-300);
+  }
+  .seeds-action-menu-popup[data-open] {
+    animation: seeds-action-menu-popup-in 120ms ease-out;
+  }
+  .seeds-action-menu-popup[data-closed] {
+    animation: seeds-action-menu-popup-out 100ms ease-in;
+  }
+
+  @keyframes seeds-action-menu-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes seeds-action-menu-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  .seeds-action-menu-group {
+    display: block;
+  }
+
+  .seeds-action-menu-group-label {
+    padding: var(--space-300);
+    font-size: var(--font-size-100);
+    color: var(--color-text-body);
+  }
+
+  .seeds-action-menu-separator {
+    height: 1px;
+    margin: var(--space-300) calc(-1 * var(--space-300));
+    background: var(--color-container-border-base);
+  }
+
+  /* menuItemStyles shared block (MenuItem / LinkItem base) */
+  .seeds-action-menu-item {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    border-radius: var(--radius-500);
+    background-color: var(--color-listItem-bg-base);
+    border: 1px solid var(--color-listItem-bg-base);
+    color: var(--color-text-body);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    text-align: left;
+    text-decoration: none;
+    padding: var(--space-300);
+    outline: 0;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    transition: all var(--duration-fast);
+    cursor: pointer;
+    user-select: none;
+  }
+  .seeds-action-menu-item[data-highlighted] {
+    border-color: var(--color-listItem-border-base);
+    background-color: var(--color-listItem-bg-hover);
+    color: var(--color-text-body);
+    text-decoration: none;
+  }
+  .seeds-action-menu-item[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  /* CheckboxItem / RadioItem add flex layout on top of the base */
+  .seeds-action-menu-item--flex {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+
+  .seeds-action-menu-item-indicator {
+    display: flex;
+    align-items: center;
+    width: 16px;
+    color: var(--color-text-body);
+  }
+
+  /* SubmenuTrigger: base + flex + space-between + open state */
+  .seeds-action-menu-submenu-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    justify-content: space-between;
+  }
+  .seeds-action-menu-submenu-trigger[data-popup-open] {
+    border-color: var(--color-listItem-border-base);
+    background-color: var(--color-listItem-bg-hover);
+  }
+
+  /* ======================================================================== */
+  /* Menu button / split button (MenuButtonStyles)                            */
+  /* ======================================================================== */
+  .seeds-menu-button-container {
+    display: inline-flex;
+    gap: 1px;
+  }
+
+  /*
+   * Qualifying with Button's base `.seeds-btn` class gives these overrides
+   * (0,2,0) specificity, so they beat the base Button's own equal-specificity
+   * border-radius rule regardless of source order — reproducing the old
+   * styled-components `&&` bump. This relies on Button's Tailwind-path base
+   * class; MenuButton's buttons are always primary/secondary with no styled
+   * props, so they always take that path. Button forwards `className` and
+   * spreads data-* onto its root, so both the class and `[data-popup-open]`
+   * land on the button element.
+   */
+  .seeds-btn.seeds-menu-button-main {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .seeds-btn.seeds-menu-button-trigger {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .seeds-menu-button-trigger .Icon-svg {
+    transition: transform var(--duration-fast) ease;
+  }
+
+  .seeds-menu-button-trigger[data-popup-open] .Icon-svg {
+    transform: rotate(180deg);
+  }
+}